더블리의 12층

한페이지에 여러 컴포넌트를 넣고 싶은 경우가 있다. 예를 들어서 왼쪽은 전화번호부 오른쪽은 채팅창! 그럴때는 아래와 같이 코드를 작성하면 된다.

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 />
      } />
  );
}

위처럼 작성하면 App에서 왼쪽은 Contacts, 오른쪽은 Chat의 컴포넌트가 화면에 렌더링 된다.