2022_01_06 React 합성vs상속

공식문서 참조

• React는 강력한 합성 모델을 가지고 있으며 상속ㄷ ㅐ신 합성을 사용하여 컴포넌트 간에 코드 재사용하는 것이 좋다.

1. 컴포넌트에 다른 컴포넌트 담기

• 어떤 컴포넌트는 자식 엘리먼트가 들어올 지 미리 예상할 수 없음
• Sidebar, Dialog 와 같은 컴포넌트
• 이러한 컴포넌트에선 children prop를 사용해서 자식 엘리먼트 출력에 그대로 전달해줄 수 있음

 

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

• 개인적인 생각으론 가변인자를 받아준다고 생각한다.
• 사실 다른 HTML, js 등에서 한줄씩만 추가해줘도 같은 기능을 쓸 수 있을것같고 상속이랑 별 차이 못느끼겠음

 

합성은 상속보다는 나은 개념이지만 사실 React만 사용하는 것이 아닌 HTML, CSS, JS 등을 사용해서 웹을 작성한다면 썩 필요한 내용은 아닌것 같다.

 

 

 

ㅇ