컴포넌트의 합성(composition)과 상속(inheritance)

  상속은 extends 키워드를 사용해 부모의 모든 속성과 메서드를 물려받는 방식이다. 상속은 부모와 자식간의 의존성이 강하게 결합되기 때문에 유연성이 부족하다. Facebook에서는 수천 개의 리액트 컴포넌트를 사용하지만 컴포넌트를 상속 계층 구조로 작성을 권장할 만한 사례가 등장하지 않았다.

합성

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

    하나의 컴포넌트에 어떤 자식 컴포넌트가 들어올지 알 수 없을때 children prop를 사용해 자식 엘리먼트를 출력에 그대로 전달해야 한다.  

//FacncyBorder내부의 것들이 props.children으로 전달 된다.
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}
 
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

    만약 여러개의 컴포넌트를 props로 전달해야 한다면 children대신 다음과 같은 방식을 상용하면 된다.

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

특수화

  어떤 컴포넌트가 특수한 경우인 경우. 즉, 일반적인 컴포넌트가 아닌 구체적은 컴포넌트가 필요한 경우 다음과 같이 일반적인 컴포너트를 렌더링 하고 props를 통해 내용을 전달하면 된다.

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