Composition

컴포넌트 합성

• 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없다. 이러한 컴포넌트에서는 childeren prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달한다.

const Example = ({ children }) => <div>{children}</div>;
export default () => {
  return (
    <Example>
      <div>Hello</div>
    </Example>
  );
};                       

• 흔하지 않지만 컴포넌트에 여러 개의 구멍이 필요할 수도 있습니다. 이런 경우에는 children 대신 자신만의 고유한 방식을 적용할 수 있다.

const Example = ({ left, right }) => (
  <>
    <div>{left}</div>
    <div>{right}</div>
  </>
);
export default () => {
  return <Example left={<div>Hello</div>} right={<div>Hi</div>} />;
};