스토리북 스토리 작성이 강제하는 리팩토링 효과: 과로·발작·피터팬 증후군 진단

컴포넌트 주도 개발에서 스토리북의 스토리 작성은 단순한 미리보기 도구를 넘어 설계 결함을 발견하고 리팩토링을 유도하는 수단으로 작용한다. 저자는 스토리북으로 컴포넌트를 독립적인 환경에서 그리는 과정에서 마주치는 세 가지 문제 유형을 병명에 비유하여 해결책을 제시한다.

과로: 단일 컴포넌트의 과도한 책임 분리

하나의 컴포넌트가 렌더링 외에 데이터 페칭, 라우팅, 상태 관리 등 다양한 사이드 이펙트를 수행하면 스토북 환경에서 모킹이 어려워진다. 이를 해결하기 위해 Presentational 요소와 Container 요소를 분리하는 패턴을 적용한다. 데이터 로직을 커스텀 훅이나 별도 컴포넌트로 분리하면 렌더링 전용 컴포넌트는 props만 받아 스토북의 Controls 플러그인으로 쉽게 테스트할 수 있다.

발작 증세: 유연성 과다로 인한 렌더링 오류 방지

타입이 느슨한 props(예: 문자열 날짜)나 넓은 범위 허용은 의도치 않은 기형적 렌더링을 유발할 수 있다. 입력 타입을 Date나 유니온 타입으로 제한하고, 유연한 기본 컴포넌트 위에 용도 특화 컴포넌트를 조립하는 방식을 권장한다. 스토북의 Controls를 통해 예외 케이스를 직접 확인하며 타입 안정성을 높일 수 있다.

피터팬 증후군: 외부 의존성 제거

부모 스타일이나 전역 컨텍스트에 의존하는 컴포넌트는 독립적으로 실행 시 오류가 발생하거나 어색하게 렌더링된다. position: relative 부모 요소를 포함하거나, 레이아웃 책임을 분리하고, 전역 훅 대신 props로 핸들러를 주입하는 방식으로 의존성을 낮춘다. 이를 통해 컴포넌트는 환경과 무관하게 재사용 가능한 단위로 완성된다.