<div id="readability-page-1" class="page"><div role="banner"> <div>  <h4>24 May 2021</h4> <p> <i></i> Reading time ~1 minute </p> </div> <h2 id="reactjs-합성-사용하기">reactjs 합성 사용하기</h2> <p>Reactjs에서는 상속보다 더 강력한 합성을 제공합니다. 상속 대신 합성을 사용하면 컴포넌트 간에 코드를 재활용하기 펼리합니다.</p> <p>합성의 사용 예제는 아래와 같습니다.</p> <div><pre><code>function SplitPane(props) {
  return (
    &lt;div className="SplitPane"&gt;
      &lt;div className="SplitPane-left"&gt;
        {props.left}
      &lt;/div&gt;
      &lt;div className="SplitPane-right"&gt;
        {props.right}
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

function App() {
  return (
    &lt;SplitPane
      left={
        &lt;Contacts /&gt;
      }
      right={
        &lt;Chat /&gt;
      } /&gt;
  );
}
</code></pre></div> <contacts> <p>와 <chat></chat> 동일한 React 엘리먼트는 단지 객체이기 때문에 다른 데이터처럼 props로 전달할 수 있습니다.</p> <h2 id="참고자료">참고자료</h2> <ul> <li><a href="https://ko.reactjs.org/docs/composition-vs-inheritance.html">합성 (Composition) vs 상속 (Inheritance)</a></li> </ul>    </contacts></div></div>

lahuman

Daniel Lim

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)

ReactJS composition(합성) 사용하기

댓글