스토리북 작성을 통해 얻게 되는 리팩토링 효과
프론트엔드
스토리북 작성을 통해 얻게 되는 리팩토링 효과
두줄요약
스토리북의 독립 렌더링은 컴포넌트의 과도한 책임과 환경 의존성을 드러내 리팩토링을 유도합니다. 렌더링·데이터·레이아웃을 분리하고 입력 범위를 제한하는 방식을 소개합니다.
문제 상황
- 앱 실행과 조건 재현에 의존한 UI 컴포넌트 결과 확인의 번거로움
- 스토리북 독립 렌더링 과정에서 드러나는 과도한 책임, 과도한 variation, 환경 의존성
원인 분석
- 데이터 조회·라우팅·상태 관리·로깅과 렌더링 책임의 단일 컴포넌트 집중
- 문자열·숫자 기반의 넓은 입력 범위로 인한 의도 밖 렌더링 가능성
- 부모 스타일·레이아웃·전역 모달 기능에 대한 암묵적 의존성
해결 방법
- Presentational 요소 분리와 Container/Presentational Pattern을 통한 데이터 로드·렌더링 분리
- Date 타입과 유니온 타입으로 입력 범위 제한, 유연한 기반 컴포넌트와 용도별 조합 컴포넌트 구성
- 레이아웃 책임, 스타일 기준 요소, 이벤트 핸들러를 분리해 props로 주입
주의할 점
- 지나치게 작은 단위 분리보다 재사용성·시맨틱 기준의 이해 가능한 단위 선택
- 유연성 확대에 따른 잘못된 재사용 가능성, 용도별 저유연성 컴포넌트 조합으로 보완
- 데이터 조회 분리의 즉시 필요성 및 개선 우선순위 검토
