[TodoList] 컴포넌트에서 다른 컴포넌트를 담기. 합성 (Composition). {props.children}

어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 있습니다.

이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋습니다.

다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다.

 

 

--> 부모 컴포넌트가 자식 컴포넌트에게 prop으로 컴포넌트를 내려줄 때, 

리턴시 <부모>html 엘리먼트들</부모> 이렇게 감싸서 내려주면

자식은 {props.children}로 그 엘리먼트들을 받을 수 있다. 

 

예시)

부모 ----- prop (color="blue" / <h1>, <p>) -----> 자식

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

(콘솔 찍어보면 children에 name으로 WelcomeDialog보임)

=> <FancyBorder> JSX 태그 안에 있는 것들이 FancyBorder 컴포넌트의 children prop으로 전달됩니다. FancyBorder는 {props.children}을 <div> 안에 렌더링하므로 전달된 엘리먼트들이 최종 출력됩니다.

 

 

자식컴포넌트에서 읽기: 

(props)

{props.color} => blue 

{props.children} => html elements. jsx

 

 

 

 

https://reactjs.org/docs/composition-vs-inheritance.html

Composition vs Inheritance – React