간단하게 storkbook을 사용해보고 후기를 작성해봅니다.
storybook이란?
컴포넌트 단위로 UI 개발을 지원하는 도구입니다. 실제 어플리케이션 실행과 별개로 컴포넌트 단위의 개발이 가능해집고 만든 컴포넌트를 공유할 수 있습니다.
React에서 storybook 사용하기
우선 cra를 해주고 storybook 추가를 위해 npx @storybook/cli sb init을 해줍니다. storybook을 추가했다면 npm run storybook을 통해 storybook 도구로 이동할 수 있습니다.
스토리북을 이용하기 위해선 스토리북을 적용할 컴포넌트에 [컴포넌트이름].stories.jsx 파일이 필요합니다.
간단하게 만든 stories파일
이렇게 만들고 나면 스토리북 도구의 Components/Input 위치에서 LargeInput 컴포넌트를 볼 수 있습니다.
제가 만든 검색창 UI 스토리북 화면
이 도구를 이용하여 컴포넌트만 따로 분리하여 개발하는게 가능합니다.
Controls탭에서 제가 컴포넌트에서 지정한 props를 조절하여 props에 따른 컴포넌트 UI를 확인할 수 있습니다.
컴포넌트 props 타입
이렇게 타입을 정해주면 스토리북 도구의 Controls에서 값을 조정할 수 있습니다.
Controls 조정
이 곳에서 props값을 바꾸면 props에 따라 컴포넌트가 변합니다.
스토리북 docs 문서
docs탭에선 컴포넌트의 설명을 볼 수 있습니다. 컴포넌트의 desription 문구는 proptypes를 지정하면서 넣을 수 있습니다.
description 지정
이렇게 간단하게 설명을 작성하여 이용자가 해당 props가 어떤 역할인지를 확인할 수 있습니다.
React 개발에서 컴포넌트 단위로 개발하고 조립하는 식으로 개발하는 것이 가장 좋은 방법이라고 생각합니다.
이번에 storybook을 이용하며 컴포넌트의 재사용성을 생각하며 코드를 만들어 보았지만 실제로는 개발하면서 input 컴포넌트를 만들 때는 외부의 state와 setState를 받아오면서 외부에 의존성이 생겨 재사용성이 좋지 않은 컴포넌트가 되었습니다.
앞으로도 어디서든 원하는 곳에서 컴포넌트를 사용할 수 있게 만들 수 있도록 컴포넌트의 재사용성을 높일 수 있도록 해야겠습니다.
