[React 학습하기] 컴포넌트에 props 전달하기

JSX 전개 구문으로 props 전달하기

때때로 우리가 전달하는 props는 반복적이다.

function Profile({ person, size, isSepia, thickBorder }) {
  return (
    <div className="card">
      <Avatar
        person={person}
        size={size}
        isSepia={isSepia}
        thickBorder={thickBorder}
      />
    </div>
  );
}

반복적인 코드는 가독성을 높일 수 있다는 점에서 잘못된 것은 아니지만 때로는 간결함이 중요할 때도 있다.
Profile 컴포넌트가 Avatar 컴포넌트에게 그런 것처럼, 일부 컴포넌트는 그들의 모든 props를 자식 컴포넌트에 전달하기도 한다. 이 경우 Profile 컴포넌트는 props를 직접적으로 사용하지 않기 때문에, 간결하게 전개구문(Spread)을 사용하는 것이 합리적이다.

function Profile(props) {
  return (
    <div className="card">
      <Avatar {...props} />
    </div>
  );
}

자식을 JSX로 전달하기(children)

브라우저 빌트인 태그는 중첩하는 것이 일반적이며 때로는 만든 컴포넌트들끼리 중첩하고 싶을 수도 있다.

<Card>
  	<Avatar/>
</Card>

만약 우리가 JSX 태그 내에 콘텐츠를 중첩하면, 부모 컴포넌트는 해당 컨텐츠를 children이라는 prop으로 받을 것이다.
예를 들면, Card 컴포넌트는 <Avatar/>로 설정된 children prop을 받아 이를 감싸는 div에 렌더링할 것이다.

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

<Card>는 children 내에서 무엇이 렌더링되는지 알아야할 필요가 없다.
따라서 children prop을 가진 컴포넌트는 부모 컴포넌트가 임의의 JSX로 채울 수 있는 "구멍"을 가진 것이라고 생각할 수 있다.
패널, 그리드 등의 시각적 래퍼에 종종 children prop을 사용한다.