[React-복습] 8. 합성(Composition) vs 상속(Inheritance)

in React on React 입문


React 합성(Composition) vs 상속(Inheritance) 에 대한 스케치 포스팅이다.


01. 합성(Composition) vs 상속(Inheritance)

React는 강력한 합성 모델을 가지고 있으며, 상속 대신 Composition(합성)을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. Composition은 컴포넌트에 컴포넌트 담기이다.

그렇다면 상속은? Facebook에서는 수천 개의 React 컴포넌트를 사용하지만, 컴포넌트를 상속 계층 구조로 작성을 권장할만한 사례가 없다고 한다. 자바처럼 상속보단 포함관계 권고사용과 같은 이치이다.


CustomDialog.jsx

import React from "react";

export default function CustomDialog(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <h1>{props.description}</h1>
    </div>
  );
}


WelcomDialog.jsx

import React from "react";
import Dialog from "./Dialog";
import CustomDialog from "./CustomDialog";

export default function WelcomDialog() {
  return (
    <div>
      <Dialog>
        <h1>Dialog - Welcome</h1>
        <h3>Thanks</h3>
      </Dialog>

      <CustomDialog
        title="CustomDialog - Welcome"
        description="Thanks"
      ></CustomDialog>
    </div>
  );
}


Dialog.jsx

import React from "react";

export default function Dialog(props) {
  return <div>{props.children}</div>;
}