React 컴포넌트 추상화: 책임 분리와 합성을 통한 유연한 설계

React 컴포넌트 개발에서 추상화는 변경에 유연한 코드를 만드는 핵심이다. 컴포넌트는 **단일 책임 원칙(SRP)**에 따라 하나의 책임만 수행하도록 설계해야 하며, 이는 응집도를 높이고 결합도를 낮춘다.

범용 컴포넌트와 합성

범용 컴포넌트는 특정 도메인에 종속되지 않아야 한다. 도메인 분기 처리가 포함된 컴포넌트는 변경에 취약해지므로, 공통 기능을 수행하는 ListItem과 같은 독립적인 컴포넌트로 분리하는 것이 좋다.

복잡한 UI는 **합성(Composition)**을 통해 해결한다. CardItem처럼 다양한 변형이 필요한 경우, CardThumbnail, CardBody 등 작은 단위의 컴포넌트로 책임을 세분화하여 조합하면 불필요한 prop 증가 없이 유연하게 대응할 수 있다.

도메인 종속 컴포넌트와 상태 관리

비즈니스 로직은 커스텀 훅으로 추상화하여 컴포넌트의 가독성을 높이고 재사용성을 확보한다. 예를 들어 데이터 조회나 스크롤 위치 제어 로직을 useFetchAlbums, useLatestScrollTop 같은 훅으로 분리하면 단위 테스트와 유지보수가 쉬워진다.

전역 상태 관리에서는 데이터 간의 의존성을 최소화하는 것이 중요하다. 재생 중인 곡과 재생목록처럼 강하게 의존하는 데이터는 Redux State를 통합하거나, 복잡한 경우 미들웨어를 통해 전처리 로직을 캡슐화하여 컴포넌트와의 결합도를 낮춰야 한다.