[React] Children prop로 컴포넌트에서 다른 컴포넌트를 담기

React에서는 Children props를 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 가능하다.

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

function HelloComponent() {
  return (
    <FancyBorder color="skyblue">
      <div>hi, hello</div>
    </FancyBorder>
  );
}

ReactDOM.render(
  <HelloComponent />,
  document.getElementById('root')
);

<FancyBorder>JSX태그 안에 있는 것들이 FancyBorder컴포넌트의 childern prop으로 전달된다.

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />
      } />
  );
}

children 대신 구멍을 만들어 left, right로 다른 데이터처럼 prop전달을 할 수도 있다.

 

공식문서 참고

합성 (Composition) vs 상속 (Inheritance) – React

See the Pen Untitled by sally (@sally0) on CodePen.