KakaoPage Introduces Composition Component Pattern for Dialog Modal Reusability

While developing UI components by applying the Atomic Design Pattern, the KakaoPage Web team introduced the Composition Component pattern to ensure the reusability and flexibility of the Dialog Modal.

Limitations of Prop-Based Implementation

Initially, the Dialog was implemented by receiving all information via Props, but Props increased rapidly whenever additional requirements such as checkboxes or descriptions arose. This complicated the internal logic of the component and increased the risk of modifying existing code and causing side effects when changing element positions, making maintenance difficult.

Applying the Composition Component Pattern

Adopting a method of separating and combining main and sub-components, similar to the relationship between <select> and <option> in HTML.

• Sub-components: Implementing independent UI elements such as DialogTitle and DialogLabelButton
• Main component: DialogMain receives children and renders them via Portal, using Children.toArray to automatically position specific elements (such as Button)
• Export structure: Exposed as namespaces such as Dialog.Title and Dialog.Button using Object.assign

Effects and Conclusion

The composition component approach improved code readability and allowed flexible responses to complex requirements, such as inserting explanatory text between CheckBoxes, without modifying existing components. The author emphasized that while the prop approach may be advantageous for Storybook testing in simple scenarios, the composition component pattern is an effective alternative when complex requirements and high reusability are needed.