React: 컴포지션이란 무엇이며 왜 중요한가요?

구성이란 무엇입니까

작은 예를 들어 설명하겠습니다.

// no composition
<AlertDialog
  open={true}
  title="Don't use composition!"
/>

// with composition
<Dialog open={true}>
  <Title>Don't use composition!</Title>
  <Button>Close</Button>
</Dialog>

언뜻 보기에 첫 번째 예는 좋은 생각처럼 보입니다. 더 짧고 AlertDialog 안에 해당 버튼 구성 요소를 완전히 숨겼으므로 더 이상 걱정할 필요가 없습니다!

하지만 이제 제목에 svg 아이콘을 포함할 수 있는 또 다른 특수 경고 대화 상자가 필요합니다! 즉, 제목이 AlertDialog 또는 string 를 취할 수 있도록 ReactNode 의 인터페이스를 변경해야 합니다.

// no composition
<AlertDialog
  open={true}
  title={<><SvgAlertIcon /> Don't use composition!</>}
/>

// with composition
<Dialog open={true}>
  <Title><SvgAlertIcon /> Don't use composition!</Title>
  <Button>Close</Button>
</Dialog>

또는 더 나쁜 것은 이제 클라이언트가 "취소"및 "확인"버튼이 있는 특수 경고 대화 상자(확인 대화 상자)를 원한다는 것입니다. 즉, 내부의 코드를 광범위하게 수정해야 하고AlertDialog "닫기"버튼이나 "취소"및 "확인"버튼을 렌더링할 수 있도록 조건 논리를 거기에 넣어야 합니다.

// no composition
<AlertDialog
  open={true}
  title="Are you sure you don't want to use composition?"
  asConfirmationDialog
/>

// with composition
<Dialog open={true}>
  <Title>Are you sure you don't want to use composition?</Title>
  <Button>Cancel</Button>
  <Button>Ok</Button>
</Dialog>

내부 코드AlertDialog는 더 많은 기능에 대한 요청이 있기 때문에 시간이 지남에 따라 더 복잡해지며 구성 요소는 내부적으로 변경되지 않습니다.

구성이 중요한 이유

위의 예에서 구성이 없으면 구성 요소의 복잡성이 더 이상 유지 관리할 수 없을 때까지 기하급수적으로 증가하기 때문에 구성이 중요하다는 것을 이미 알 수 있습니다. 그러나 React에서 구성을 사용하지 않는 것은 객체 지향 프로그래밍에서 기억할 수 있는 잘 알려진 원칙(SOLID 원칙)을 위반하는 것이기도 합니다.

단일 책임

경고 대화 상자의 예를 고수하십시오. 단일 책임 원칙이 위반되고 있음을 알 수 있습니다. 구성 요소가 경고 대화 상자를 표시하는 역할만 담당할 것으로 예상하지만 이제 제목을 렌더링하는 논리와 asConfirmationDialog 플래그를 기반으로 다른 버튼을 표시하는 논리도 포함됩니다.

개방/폐쇄 원리

개방/폐쇄 원칙 위반은 React 구성 요소에도 적용될 수 있습니다. 확장하려면 AlertDialog 구성 요소의 내부 논리를 수정해야 합니다(수정을 위해 닫혀 있어야 하고 확장을 위해 열려 있어야 함).


추신: 재사용 가능한 구성 요소의 라이브러리를 만들 때 컴포지션을 사용하지 않는다는 것은 라이브러리를 사용하는 개발자가 라이브러리에서 확인 대화 상자를 (쉽게) 만들 수 없다고 결정했음을 의미합니다. 실제로 이는 라이브러리에 있는 구성 요소의 인터페이스를 변경하기 위해 많은 기능 요청이나 요청을 받는다는 것을 의미합니다. 또는 더 나쁜 것은 개발자가 컴포지션을 사용하는 다른 라이브러리를 사용하기로 결정할 것입니다.