React Props

React에서 **"props"는 속성(properties)**을 의미하며, 컴포넌트 간에 데이터를 전달하는 메커니즘을 제공한다. 이는 React의 주요 특징 중 하나인 단방향 데이터 흐름을 지원한다. 즉, 데이터는 부모 → 자식 컴포넌트로 전달된다.

// Person의 props는 name, age를 갖는다 !
function Person(props) {
  return <h1>Hello, {props.name}. You are {props.age} years old.</h1>;
}

-----------------------------------------------------------------------------

function App() {
  return <Person name="Sarah" age={28} />;
}

// props로 name, description 받아옴
function Profile(**props**) {
  const profile = props.profile;
  return (
    <div>
      <h1>{**profile.name**}</h1>
      <p>{**profile.description**}</p>
    </div>
  );
}

--------------------------------------------------

// App -> profileDate -> name, description 배열을 갖고 있음
function App() {
  const profileData = {
    **name**: 'Sarah',
    **description**:

 'A software developer'
  };

// Profile에 보낸다
  return <**Profile profile={profileData}** />;
}

React의 props.children

props.children은 React에서 특별한 prop이다. 이는 컴포넌트의 opening 및 closing 태그 사이에 배치되는 모든 것을 포함한다.

이를 통해 컴포넌트를 "포함(Wrapper)" 컴포넌트로 사용하거나, 컴포넌트의 내용을 동적으로 구성하는 데 사용할 수 있다.

간단한 사용예제

function Welcome(props) {
  return <div>{**props.children**}</div>;
}

function App() {
  return <**Welcome>Hello, world!**</Welcome>;
}

위 예제에서 "Welcome" 컴포넌트는 props.children을 출력한다. "App" 컴포넌트에서 "Welcome" 컴포넌트를 사용하면서 "Hello, world!"를 children으로 전달한다. 따라서 "Hello, world!"가 출력된다.