합성 컴포넌트(Compound Component) 패턴

최종 수정 : 2024-06-22

합성 컴포넌트(Compound Component) 패턴

그룹 컴포넌트의 동작과 상태를 포함하고 있지만 렌더링 제어를 외부 사용자에게 제공하는 패턴이다.

하나의 작업을 위해 여러 컴포넌트를 만들어 역할을 분담하게 한다.

 

Context API를 사용해서 처음 작성해야 하는 코드가 꽤 많지만, 컴포넌트를 사용하는 곳에서는 하위에 어떤 컴포넌트가 있 는지 볼 수 있고, 위치도 자유롭게 수정 가능하다.

 

# 장점

1) 관심사 분리 : 부모 컴포넌트에 모든 UI 상태 로직이 있고 이를 내부적으로 모든 자식 컴포넌트에게 전달한다면 책임이 명확하게 구분된다.

2) 복잡성 감소 : 속성을 특정 컴포넌트로 전달하는 props Drillingm과 달리 속성을 바로 자식 컴포넌트에 전달한다. 내부적으로 상태를 다루며 몇몇 자식 컴포넌트들 사이에서만 공유한다.

3) 자식 컴포넌트들을 하나하나 import할 필요가 없이 사용할 수 있다.

 

# 단점

핵심 단점으로는 부모 컴포넌트의 자식 컴포넌트만 props에 접근할 수 있다. 하지만 이 문제는 Context API를 사용하면 해결할 수 있다.

 

# 언제 사용하는 게 좋을가?

1) 재사용 가능한 컴포넌트를 만드는 경우

2) 최소한의 결합으로 응집력이 높은 컴포넌트를 만드는 경우

3) 컴포넌트 간 로직을 공유하는 게 더 좋은 경우

 

참고 자료

https://patterns-dev-kr.github.io/design-patterns/compound-pattern/

Compound 패턴

https://bum-developer.tistory.com/entry/React-Compound-Component-%ED%8C%A8%ED%84%B4

[React] Compound Component 패턴

https://velog.io/@kldream/%EC%BB%B4%ED%8C%8C%EC%9A%B4%EB%93%9C-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%8C%A8%ED%84%B4-%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

[React] 컴파운드 컴포넌트 패턴을 알아보자

https://www.howdy-mj.me/design/headless-components

Headless 컴포넌트