[React] Compound Component Pattern

React로 컴포넌트를 만들다 보면 디자인이 바뀌어 컴포넌트를 재사용할 수 없거나, 처음 계획가 달리 컴포넌트의 구조가 복잡해지는 경우가 있습니다. 이로 인해 코드의 가독성이 떨어지거나 새로운 컴포넌트를 만들게 됩니다. 컴파운드 컴포넌트 패턴(Compound Components Pattern)를 사용하면 이와 같은 문제를 해결할 수 있습니다.

 

목차

1. Compound Component Pattern?

2. 주요 개념

3. 예제 및 문제점

4. Compound Component Pattern 적용 예시

5. Compound Component Pattern 사용 예시

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. Compound Component Pattern?

Compound Component Pattern은 서브(자식) 컴포넌트들이 메인(부모) 컴포넌트 내부의 상태를 공유하면서 비즈니스 로직과 사용자 인터페이스와 관련된 부분을 구분하는 React 패턴입니다. 다시 말해, 여러 개의 작은 컴포넌트들이 각각의 역할을 분담하도록 하고 이를 조립하여 하나의 큰 컴포넌트를 만드는 패턴입니다.

 

예시

 

2. 주요 개념 및 구성

 

• 상위 컴포넌트(Parent Component): 여러 하위 컴포넌트의 공통 상태와 로직을 관리합니다.
• 하위 컴포넌트(Child Components): 상위 컴포넌트와 결합되어 특정 역할을 수행하는 컴포넌트들입니다.
• Context API: 상태를 공유하기 위해 사용되며, 이를 통해 하위 컴포넌트들이 부모 컴포넌트의 상태에 접근하고 반응할 수 있습니다.

3. 예제 및 문제점 (Counter)

Counter 컴포넌트는 아래 예시처럼 감소 버튼-카운트-증가 버튼 순서로 디자인된 컴포넌트입니다. 모든 카운터가 위 예시처럼 공통으로 사용된다면 아무 문제가 없을 것입니다. 그런데 만약 레이아웃의 순서가 카운트-감소 버튼- 증가 버튼 순서로 바뀌거나, 감소 또는 증가 기능만 있는 카운터가 필요하면 어떻게 해야 할까요?

 

1. 특정 prop을 받고 prop에 따라 조건부로 해당하는 형태로 컴포넌트를 렌더링한다.
   
   • 코드 복잡성 증가: 조건이 많아질수록 코드가 복잡해져 가독성이 떨어집니다. 특히 여러 조건을 분기하게 되면 조건문이 길어지고 중첩되어, 코드를 이해하기 어려워집니다.
   • 확장성 부족: 조건부 분기를 많이 사용하게 되면 추가 조건이 늘어날 때마다 조건문을 수정해야 하므로 확장성이 떨어집니다. 특히 여러 UI 조건을 처리해야 하는 복잡한 컴포넌트에서 문제가 됩니다.
   • 유지보수 어려움: 특정 조건이 변경되거나 새로운 조건이 추가될 경우, 기존의 조건부 로직을 계속 수정해야 합니다. 이로 인해 코드가 불안정해질 수 있고, 수정 시 의도치 않은 오류가 발생할 가능성이 높습니다
2. Counter 컴포넌트를 여러 개 만들고 각 상황에 맞는 컴포넌트를 사용한다.
   • 코드 중복: 여러 컴포넌트를 각각 따로 작성하게 되면, 공통된 로직이나 UI 요소를 가진 컴포넌트들이 반복될 수 있습니다.
   • 유지보수 어려움: 코드 중복이 있는 경우, 기능 수정이 필요할 때 각각의 컴포넌트를 모두 수정해야 합니다. 같은 로직이 여러 컴포넌트에 분산되어 있으면 수정 시 빠뜨리는 경우가 발생할 수 있고, 이는 예상치 못한 오류로 이어질 수 있습니다.
   • 재사용성 저하: 공통 기능을 가진 컴포넌트를 여러 개 작성하면, 그 기능을 다른 곳에서 사용할 때 유연하게 활용하기 어렵습니다. 

Compound Component Pattern을 사용하면 위와 같은 문제를 해결할 수 있습니다.

 

4.  Compound Component Pattern 적용 예시

폴더 구조

 

DecreaseButton : - 버튼 (count 감소 기능)

 

IncreaseButton : + 버튼 (count  증가 기능)

 

DisplayedCount : count 표시

 

CounterProvider : 상태를 공유하기 위해 사용. 하위 컴포넌트들이 전역으로 counter와 처리 로직에 접근 가능하게 한다.

 

Counter : 하위 컴포넌트들을 조립하여 하나의 큰 컴포넌트를 만든다

 

5. Compound Component Pattern 사용 예시

 

Compound Component Pattern은 각각의 자식 컴포넌트가 독립적이면서도 전체 UI를 구성하는 데 필요한 로직을 부모 컴포넌트에서 관리하기 때문에 위 예시처럼 재사용성이 매우 뛰어납니다.

 

 

Compound Component Pattern 장점

• context API와 결합해 부모 컴포넌트에서 상태를 관리하고, 자식 컴포넌트들이 이를 공유하도록 할 수 있습니다. 이 방식은 코드의 중복을 줄이고, 상태 관리의 일관성을 유지하는 데 유리합니다.
• 부모 컴포넌트가 자식 컴포넌트들에게 필요한 데이터를 prop으로 전달하는 방식이므로, 자식 컴포넌트들이 서로 의존적인 관계를 가지면서도 독립적으로 동작할 수 있습니다.
• 자식 컴포넌트들이 특정 역할을 수행할 때 필요한 로직을 부모에서 관리하게 되어, 다른 곳에서도 재사용할 수 있습니다. 또한, 컴포넌트 추가나 수정이 쉬워 확장성이 높습니다.
• 여러 개의 자식 컴포넌트를 조합해서 복잡한 UI를 구성할 때, 각 자식 컴포넌트의 상태나 로직을 독립적으로 제어하면서도 부모 컴포넌트가 이를 통합적으로 관리할 수 있습니다.

 

 

 

[React] Render Props Pattern

 

[TS] 타입 추론과 타입 단언

참고

Compound 패턴

advanced-react-patterns/src/patterns/compound-component at main · alexis-regnaud/advanced-react-patterns