[React.js] 11. 합성 vs 상속

합성 (Composition)

상속 (Inheritance)

 

React에서는 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는것을 권장한다.

 

 

컴포넌트에서 다른 컴포넌트를 담기

다른 튜토리얼에서도 이와 같이 잘 쓰고 있었지만, 다시 확인하는 차원에서 살펴보면 아래와 같다.

이렇게 하나의 컴포넌트 안에서 다른 컴포넌트를 가지고 표기하는 방식이다.

 

 

 

자습서에서 알려주는 예시는 아래와같다.

props.children 은 자식 엘리먼트의 내용을 그대로 출력할 수 있는 특수한 prop 이다.

아래의 예시에서는 h1태그와 p 태그에 해당된다.

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

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

 

가끔 component 내부에서 다른 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 />
      } />
  );
}

 

 

 

 

 

React 에서 상속은?

React를 만든 Facebook에서는 상속 계층 구조로 만들어야하는 이유를 찾지 못했고, Component 자체로 재사용 가능하기때문에 상속을 따로 권하지 않는다.

위 처럼 재사용이 필요한 Component 를 분리하고, 이를 import해서 사용하는 것이 편리하다고 한다.

만약 UI 가 아닌 기능을 재사용하고 싶다면, 별도의 javascript 모듈로 분리하여 import 한 후 사용하는 것이 좋다고 한다.