JSX에서 재사용 가능한 컴포넌트를 만드는 핵심 원칙: 구성 요소 구성(Component Composition)

React 개발을 하다 보면 반복적으로 등장하는 UI 요소들을 재사용 가능한 컴포넌트로 만들고 싶어지게 됩니다. 이번 글에서는 그런 상황에서 꼭 알아야 할 개념, 바로 **구성 요소 구성(Component Composition)**에 대해 알아보겠습니다.

---

구성 요소 구성(Component Composition)이란?

React에서는 컴포넌트를 다른 컴포넌트 안에 포함시킬 수 있습니다. 예를 들어, Modal이라는 컴포넌트 안에 SuccessMessage를 넣는 식이죠:

<Modal>
  <SuccessMessage />
</Modal>

이처럼 JSX에서는 컴포넌트를 중첩해서 사용하는 것이 매우 자연스럽고 흔한 방식입니다. 하지만 여기서 재사용성이라는 관점에서 한 가지 중요한 문제가 발생합니다.

---

문제: 깊게 결합된 컴포넌트 구조

아래 예제를 생각해 봅시다.

function App() {
  return (
    <Modal>
      <SuccessMessage />
    </Modal>
  );
}

여기에서 Modal은 SuccessMessage를 자식으로 가지며, 둘은 강하게 결합되어 있습니다. 만약 ErrorMessage를 표시하고 싶다면 새로운 ModalWithError 컴포넌트를 만들어야 할까요? 이런 방식은 중복과 유지보수의 어려움을 초래합니다.

---

해결책: children props를 활용한 구성 요소 구성

이 문제를 해결하기 위해 사용하는 기술이 바로 **구성 요소 구성(Component Composition)**입니다. 핵심은 컴포넌트 내부에 자리를 남겨두고, children props를 활용해 외부에서 어떤 내용을 넣을지 결정하는 것입니다.

 

function Modal({ children }) {
  return (
    <div className="modal">
      {children}
    </div>
  );
}

<Modal>
  <SuccessMessage />
</Modal>

<Modal>
  <ErrorMessage />
</Modal>

---

구성 요소 구성의 장점

1. 재사용성 향상
   • Modal 하나만 정의해두면, 어떤 메시지든 구성할 수 있습니다.
2. 유연한 조합 가능
   • SuccessMessage, ErrorMessage, 혹은 커스텀 레이아웃까지 다양한 형태로 조합 가능합니다.
3. Props Drilling 문제 해결에 도움
   • 다음에 다룰 레이아웃 구성에서 자식 요소를 유연하게 넘길 수 있어 props drilling을 줄일 수 있습니다.

---

구성 요소 구성이 필요한 순간

• 재사용 가능한 UI 레이아웃이나 팝업 등을 만들 때
• 컴포넌트 내부의 자식 요소가 고정되지 않고 외부에서 결정되어야 할 때
• 더 깔끔하고 유지보수가 쉬운 컴포넌트 구조를 원할 때

---

마무리

구성 요소 구성(Component Composition)은 React 컴포넌트 설계에서 가장 중요한 원칙 중 하나입니다. children props를 잘 활용하면 중복을 줄이고, 더 나은 구조의 컴포넌트를 만들 수 있습니다. 다음 글에서는 이 구성이 레이아웃 설계에서 어떻게 쓰이는지를 구체적인 예제와 함께 다뤄보겠습니다.