ReactJS composition(합성) 사용하기

24 May 2021

Reading time ~1 minute

reactjs 합성 사용하기

Reactjs에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다.

합성의 사용 예제는 아래와 같습니다.

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

와 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다.

참고자료

합성 (Composition) vs 상속 (Inheritance)