프론트엔드
스토리북 작성을 통해 얻게 되는 리팩토링 효과
두줄요약
스토리북의 독립 렌더링 과정에서 컴포넌트의 책임 과다와 환경 의존성을 발견했습니다. 표현·데이터·레이아웃을 분리해 재사용성과 검증 가능성을 높였습니다.
문제 상황
- 앱 환경에서는 동작하지만 독립된 스토리북 환경에서 렌더링 오류나 의도 밖 결과물 발생
- 데이터 조회, 라우팅, 전역 상태, 레이아웃 등 여러 책임이 한 컴포넌트에 집중
원인 분석
- 부모 스타일·전역 환경·데이터 패칭에 대한 암묵적 의존성
- 문자열·숫자 기반의 과도한 props 유연성으로 잘못된 렌더링 가능성 확대
해결 방법
- Presentational 요소 분리와 아토믹 디자인 기반 컴포넌트 배치
- Container/Presentational Pattern과 fetcher 분리로 데이터 로드 의존성 외부 주입
- 레이아웃 책임과 이벤트 핸들러 분리, props 타입 제한 및 용도별 조합 컴포넌트 구성
주의할 점
- 재사용성만 위해 지나치게 작은 단위로 분리하지 않는 기준 필요
- 유연한 기반 컴포넌트와 용도별로 제약된 조합 컴포넌트 간 균형 고려
