합성

Component에 Component를 담는 것.

Dialog.jsx

backgroundColor: Pink로 설정하여 범용적인 스타일링을 예시로 적용하였다.

props에 children만 받는 형태이다.

import React from 'react'

export default function Dialog(props) {
  return <div style={{ backgroundColor: 'pink' }}>{props.children}</div>
}

CustomDialog.jsx

위 Dialog Component 내부에 또 다른 Component를 담았다.

import React from 'react'
import Dialog from './Dialog'

export default function CustomDialog(props) {
  return (
    <Dialog>
      <h1>{props.title}</h1>
      <h5>{props.describtion}</h5>
    </Dialog>
  )
}

WelcomeDialog.jsx

최종적으로 렌더링하는 Component이다.

import React from 'react'
import CustomDialog from './CustomDialog'

export default function WelcomeDialog() {
  return <CustomDialog title="hi" description="hi" />
}

상속

아직까지 React팀에서 Component를 상속 계층 구조로 작성할 만한 사례를 찾지 못했다고 한다.