props

React는 하나의 컴포넌트에서 다른 컴포넌트로 데이터를 전달할 때 props를 사용. (부모 컴포넌트->자식 컴포넌트 : 단방향 데이터 흐름).
데이터 흐름을 동적으로 만들고 싶을 때 유용.
부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터이기 때문에 자식 컴포넌트에서는 읽기 전용으로 사용. 즉, 자식 컴포넌트에서는 해당 데이터를 직접 수정할 수 없음.

위 이미지를 예로 들면, Component는 붕어빵을 만드는 틀, Element는 만들어진 붕어빵, Props는 붕어빵 속재료라고 이해하면 쉽다.

props 예시

function Welcome(props) {
  return <h1>{props.name}이고, {props.age}세입니다.</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" age={25}/>
      <Welcome name="Cahal" age={30} />
      <Welcome name="Edite" age={27} />
    </div>
  );
}

문자열을 전달할 때는 ""를, 문자열 외의 값을 전달할 때는 {}를 사용.

※ 이후에 설명할 개념이지만 콜백함수를 전달하여 부모 컴포넌트의 상태 변경도 가능.

분할 대입과 객체 생략 표기법을 사용하여 효율적으로 props를 다룰 수도 있다.
분할 대입과 객체 생략 표기법은 이 곳에서 정리해두었다.
예시는 분할 대입을 이용한 방법을 사용하였다.

const MyComponent = (props) => {

const { name, age } = props;

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent name="John" age={30} />
    </div>
  );
};

아래와 같이 인수 단계에서 전개하는 패턴을 사용하기도 한다.

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <MyComponent name="John" age={30} />
    </div>
  );
};

특별한 props = children

A 컴포넌트 사이에 B 컴포넌트가 있을 때, A 컴포넌트에서 B 컴포넌트 내용을 보여주기 위해 사용.
즉, 다른 컴포넌트가 특정 컴포넌트의 자식으로 들어갈 수 있음.

const ParentComponent = () => {
  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent>Hello from Parent!</ChildComponent>
    </div>
  );
};

const ChildComponent = (props) => {
  return (
    <div>
      <h2>자식 컴포넌트</h2>
      <p>{props.children}</p>
    </div>
  );
};

참고 자료

처음 만난 리액트 11강 (components와 props의 정의)
[말로 풀어쓴 React] props(properties), children