React 컴포넌트와 추상화
프론트엔드
React 컴포넌트와 추상화
두줄요약
React 컴포넌트를 책임과 도메인 의존성 기준으로 어떻게 추상화할지 설명한 글입니다. 범용 컴포넌트 분리와 합성, 훅 활용을 통해 유연한 구조를 제안했습니다.
구조와 흐름
- React 컴포넌트를 추상화할 때의 핵심을 재사용성, 관심사 분리, 응집도, 변경 유연성으로 정리
- 범용 컴포넌트는 도메인 의존성을 낮추고, 특정 UI 책임만 담당하도록 설계
- 카드 같은 복잡한 UI는 더 작은 요소로 나누어 합성으로 조합하는 방식 제안
- 도메인 로직이 필요한 경우에는 컴포넌트보다 커스텀 훅으로 분리하는 방향 제시