인생마커
article thumbnail
[React/디자인패턴] 합성 컴포넌트 (Compound Component)
React 2025. 5. 12. 20:02

개요React로 프로젝트를 개발하면서 제가 애용하는 디자인 패턴을 꼽자면 단연 합성 컴포넌트(Compound Component) 패턴입니다. 프론트엔드 개발을 해보신 분들이라면 동일한 컴포넌트를 애플리케이션의 여러 영역에서 약간씩 다른 UI로 사용해야 하는 상황을 어렵지 않게 마주하게 됩니다. 이 때 많은 개발자들이 prop을 추가하고 컴포넌트 내부에서 조건부 로직이나 태그를 분기 처리하는 방식을 선택합니다. 이 방식은 결국 props가 많아지고 분기처리가 추가될 수록 복잡도는 올라가고 유지 보수 관리는 더욱 어려워지게 됩니다. 이런 상황에서 합성 컴포넌트를 잘 설계해서 만들어 놓으면 그 명확한 구조와 유연성은 이 후에 마주치는 문제들을 유연하게 대응할 수 있게 해줍니다. 단순히 props를 전달하는 ..