카카오페이지, Dialog Modal 재사용성 위해 합성 컴포넌트 패턴 도입

카카오페이지 웹 파트는 Atomic Design Pattern을 적용해 UI 컴포넌트를 개발하던 중, Dialog Modal의 재사용성과 유연성 확보를 위해 합성 컴포넌트(Composition Component) 패턴을 도입했다.

Prop 기반 구현의 한계

초기에는 모든 정보를 Prop으로 받는 방식으로 Dialog를 구현했으나, 체크박스나 설명 등 추가 요구사항이 생길 때마다 Prop이 급증했다. 이는 컴포넌트 내부 로직을 복잡하게 만들고, 요소 위치 변경 시 기존 코드 수정과 사이드이펙트 발생 위험을 높여 유지보수를 어렵게 했다.

합성 컴포넌트 패턴 적용

HTML의 <select>와 <option> 관계처럼, 메인 컴포넌트와 서브 컴포넌트를 분리해 조합하는 방식을 채택했다.

• 서브 컴포넌트: DialogTitle, DialogLabelButton 등 독립적인 UI 요소 구현
• 메인 컴포넌트: DialogMain이 children을 받아 Portal로 렌더링하며, Children.toArray 등을 활용해 특정 요소(Button 등)의 위치를 자동 배치
• Export 구조: Object.assign을 이용해 Dialog.Title, Dialog.Button 등 네임스페이스 형태로 노출

효과 및 결론

합성 컴포넌트 방식은 코드의 가독성을 높이고, CheckBox 사이에 설명 문구를 삽입하는 등 복잡한 요구사항에도 기존 컴포넌트 수정 없이 유연하게 대응할 수 있게 했다. 저자는 단순한 상황에서는 Prop 방식이 스토리북 테스트 등에 유리할 수 있으나, 복잡한 요구사항과 높은 재사용성이 필요할 때 합성 컴포넌트 패턴이 효과적인 대안이라고 강조했다.