합성 (Composition) vs 상속 (Inheritance)

https://ko.reactjs.org/docs/composition-vs-inheritance.html를 읽고 정리한 글입니다

 

• 합성 (Composition)
  • 리액트에서는 상속 대신 합성을 사용하여 컴포넌트 간 코드를 재사용하는 것을 권장

// 예시 코드
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!" />
  );
}

• 상속 (Inheritance)
  • 컴포넌트를 상속 계층 구조로 작성할만한 사례는 아직 없다
• 컴포넌트는 원시 타입의 값, React element, 함수 등 어떤 props도 받을 수 있다
• 기능을 여러 컴포넌트에서 재사용하려면 별도의 JS 모듈로 분리하기 ⇒ 상속 없이 해당 컴포넌트에서 import를 통해 해당 함수, 객체, 클래스 등을 사용 할 수 있다