프론트엔드
React 컴포넌트와 추상화
두줄요약
React 컴포넌트의 책임을 범용 UI와 도메인 로직으로 나누는 추상화 방법을 설명했습니다. 합성·커스텀 훅·상태 설계로 결합도를 낮추는 트레이드오프를 다뤘습니다.
구조와 흐름
- React 컴포넌트의 추상화를 범용 컴포넌트와 도메인 종속 컴포넌트로 구분
- 단일 책임, 응집도, 결합도, 캡슐화를 기준으로 컴포넌트 경계 설정
- 변화에 유연한 UI·비즈니스 로직·상태 구조 지향
선택 이유
- 범용 컴포넌트의 도메인 분기 제거로 재사용성과 변경 유연성 확보
- 카드의 하위 요소 분리와 합성으로 복잡한 prop·DOM 구조 완화
- 커스텀 훅을 통한 렌더링과 API 호출·스크롤 복원 로직의 분리
트레이드오프
- 단순한 요구에는 prop 기반 설계가 합성보다 가독성과 유지보수 측면에서 유리
- 강하게 의존하는 상태는 통합으로 응집 가능하지만 거대 상태 복잡도 증가 가능성
- 복잡한 독립 상태는 분리 유지 후 미들웨어·인터페이스로 상태 간 처리 담당
적용해볼 점
- 공통 UI에 특정 페이지·도메인 분기와 전용 prop 추가 여부 점검
- 서버 데이터와 전역 클라이언트 상태 분리를 위한 React Query·SWR·RTK Query 검토
- 데이터 의존성, 내부 구현 캡슐화, 책임별 코드 응집도 기준의 지속적 설계 검토
