합성 컴포넌트로 재사용성 극대화하기

간단 소개

합성 컴포넌트 패턴을 사용하여 재사용성과 유연성을 극대화한 Dialog Modal 구현 사례를 소개하고, prop 기반 방식과의 비교를 통해 장단점을 분석합니다.

AI Summary

서론: 프론트엔드 개발에서 컴포넌트 분리 기준과 재사용성의 중요성을 강조하며, Atomic Design Pattern 적용 사례를 소개.
- Atomic Design Pattern은 컴포넌트별 역할 분리 및 높은 재사용성을 제공.
- Dialog Modal 구현 시 재사용성을 높이기 위한 고민에서 시작.
문제점: prop 기반 컴포넌트의 한계와 합성 컴포넌트 도입 배경.
- 최초 구현은 prop 기반으로 간단하게 구현했지만, 추가 요구사항 발생 시 prop이 과도하게 늘어나는 문제 발생.
- prop 기반 방식은 컴포넌트 위치가 고정되어 유연성이 떨어지고, 사이드 이펙트 발생 및 유지보수 어려움 증가.
해결책: 합성 컴포넌트 패턴 적용 및 효과.
- 합성 컴포넌트 패턴은 컴포넌트를 여러 집합체로 분리하여 조합해 사용, 높은 재사용성과 유연성을 제공.
- 서브 컴포넌트(DialogTitle, DialogLabelButton 등)와 메인 컴포넌트(DialogMain)를 분리하여 구현.
- 메인 컴포넌트에서 서브 컴포넌트의 위치를 제어하고, 최종적으로 렌더링.
- 합성 컴포넌트 방식은 prop 방식보다 직관적이고 유연하게 요구사항에 대응 가능.
결론: 합성 컴포넌트의 장점과 한계, 그리고 적용 권장.
- 합성 컴포넌트는 재사용성과 유연성이 뛰어나 복잡한 요구사항에 적합.
- 일반적인 상황에서는 prop 방식이 더 용이할 수 있으며, 상황에 따라 적절한 패턴 선택이 중요.