React에서 자식 컴포넌트가 props를 매개변수로 받는 이유

React에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 props로 전달하도록 설계되어 있다. 이때 자식 컴포넌트가 이 데이터를 받을 수 있도록 props라는 객체가 자동으로 생성되어 자식 컴포넌트의 매개변수로 넘어오게 되는 것이라고 한다.

 

즉, 자식 컴포넌트에서 props를 함수의 매개변수로 설정하는 이유는 React가 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때, 이 데이터를 자동으로 props라는 객체에 담아 전달하기 때문이다.

이때 props는 객체 형태이며, 전달한 데이터가 props 객체의 프로퍼티로 들어간다.

 

 

1. 매개변수로 props를 사용하는 방식

function ChildComponent(props) {
  console.log(props);  // 자식 컴포넌트가 전달받은 'props' 객체를 확인
  return (
    <div>
      <p>Name: {props.info.name}</p>  {/* props 객체 안의 info 객체에서 name을 가져옴 */}
      <p>Age: {props.info.age}</p>    {/* props 객체 안의 info 객체에서 age를 가져옴 */}
    </div>
  );
}

 

2. 정리

1. 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때, props라는 객체에 데이터를 담아 전달한다.
2. 자식 컴포넌트는 이 데이터를 매개변수로 받게 되며, props라는 객체로 전달된다.
3. 자식 컴포넌트에서는 이 props 객체에서 원하는 데이터를 꺼내서 사용할 수 있다.

자식 컴포넌트에서 props를 통해 부모로부터 데이터를 받는 것은 React의 기본 설계 방식이므로, props라는 매개변수로 데이터를 자동으로 받아 사용하게 되는 것이다.