[React] React.js 튜토리얼 8- 합성 (Composition)

 

 

 

 

이미지출처: https://velog.io/@hyejeong/%EC%99%9C-React%EB%A5%BC-%EC%8D%A8%EC%95%BC%ED%95%A0%EA%B9%8C

 

 

이전 포스팅을 보려면 아래 링크를 눌러주세요.

 

 

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 1- 프로젝트 생성 및 실행하기

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 2- 주요 개념 살펴보기(JSX, Component, Props, State)

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 3- 이벤트 처리하기

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 4- 조건부 렌더링

[React] React.js 튜토리얼 5- list와 key

[React] React.js 튜토리얼 5- list와 key

[React] React.js 튜토리얼 6- 폼(Form)

[React] React.js 튜토리얼 7- State 끌어올리기

 

 

 

 

 

 

이번 포스팅에서는 합성 (Composition) 에 대해서 알아보려 합니다.

먼저, 합성에 대해서 알아봅시다.

합성은 컴포넌트간 코드를 재사용하여 합성하는 것을 의미합니다.

컴포넌트 안에 다른 컴포넌트를 담아 박스역할을 하도록 만들 수 있습니다.

 

function box(props){
  return (
    <div className={"text-white rounded bg-" + props.color}>
      {props.children}
    </div>
  )
}

function WelcomeDialog(){
  return (
    <box color="blue">
      <h1>Welcome!</h1>
      <p>Thank you for visiting our spacecraft!</p>
    </box>
  )
}

 

 

 

아래와 같이 타이틀, 메세지 등의 양식을 정해놓고 사용할 수도 있습니다.

 

 

function box(props){
  return (
    <div className={"flex text-white rounded bg-" + props.color}>
      <h1 className="title">
        {props.title}
      </h1>
      <p className="message">
        {props.message}
      </p>
    </div>
  )
}

function WelcomeDialog(){
  return (
    <box color="blue"
      title="Welcome"
      message="Thank you for visiting our spacecraft!"
    />
  )
}

 

 

 

여러 개의 컴포넌트를 전달하여 사용할 수도 있습니다.

 

function box(props){
  return (
    <div className={"flex text-white rounded bg-" + props.color}>
      <div className="basis-1/2">
        {props.left}
      </div>
      <div className="basis-1/2">
        {props.right}
      </div>
    </div>
  )
}

function WelcomeDialog(){
  return (
    <box color="blue"
      left={ <leftDiv/> }
      right={ <rightDiv/> }
    />
  )
}

 

 

 

 

참고한 React 문서 URL입니다.

https://ko.legacy.reactjs.org/docs/composition-vs-inheritance.html

합성 (Composition) vs 상속 (Inheritance) – React