이 글을 쓰게 된 이유는 아직 한국어로 작성된 스토리북 자료들이 몇없고, 부담없이 가볍게 볼만한 자료는 정말 극히 드물어서입니다. 컴포넌트들의 UI를 확인하는 목적으로만 가볍게 사용하실 분들을 위해 작성해보겠습니다. (UI를 확인하는 기능만을 사용합니다.)
1. 스토리북이란 대체 뭔가?
- 스토리북은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구이다.
- 실제 웹 어플리케이션의 환경과 별개로 독립적인 컴포넌트 단위의 개발 진행이 가능하게 해주는 도구이다.
이게 도대체 무슨 말이냐 함은
이런식으로 button 컴포넌트들에 대한 storybook 코드를 짜게 된다면
위와 같이 어플리케이션 환경과 별개인 독립적인 환경에서 컴포넌트들의 UI를 확인해볼 수 있다. 이렇게 컴포넌트 단위의 UI 개발을 도와주는 도구가 storybook이다.
2. 스토리북 사용 이유
첫번째는 컴포넌트 단위의 개발을 할 수 있다는 장점이 있다. 현재 프론트엔드 개발은 주로 컴포넌트 단위 개발을 하는게 트렌드인 상황인데 각 컴포넌트들의 UI를 확인하려면 별도의 더미 페이지를 만들어서 확인하거나 하는 번거로움이 있는데 스토리북을 사용하게 되면 각 컴포넌트들의 UI를 실시간으로 확인 할 수 있다.
스토리북을 사용하게 되면 자연스럽게 컴포넌트 단위로 개발을 하게 되면서 리액트적 사고도 자연스럽게 할 수 있다.
또한 컴포넌트 단위로 개발을 하게 되면 이제 잦은 피드백을 통한 완성도 높은 결과물을 낼 수 있다.
두번째는 프론트엔드 특히 리액트 개발자라면 환장 좋아하는 아토믹 설계 패턴과 찰떡궁합이다. 아토믹 설계 패턴은 가장 작은 단위인 원자 단위까지 컴포넌트들을 쪼개고 원자들을 조합해 분자를 만들고, 조직을 만들고 페이지를 만드는 패턴이다. 이렇게 작은 단위의 원자 단위부터의 개발을 하는 아토믹 설계 패턴과 작은 단위의 컴포넌트들의 UI 개발을 도와주는 스토리북은 아주 찰떡이라고 할 수 있다.
세번째로는 UI들을 문서화가 가능한데
storybook 내에서 Docs 탭을 들어가보면 이런식으로 전달해야할 props 들을 정리할 수 있게 된다. 문서화에 대해선 추후에 더 자세히 정리해서 올릴 예정이다.
3. 가장 중요한 사용방법
npx storybook init터미널에 입력해 설치해준다.
설치가 끝이나면 stories 폴더와 .storybook 폴더가 생겨나는데 stories 폴더에는 예제가 들어있고, .storybook 폴더에는 전역적으로 설정 관련 파일들이 있다.
이후
npm run storybook터미널에 입력해 실행해준다.
그러면 실행 초기 화면이 뜨게되는데 왼쪽 목차에 stories 폴더에 있는 예제들이 존재하는데 한 번 구경해보는 것도 좋다. 구경을 다 했다면 stories 폴더를 지워버려도 괜찮다.
이후 예제 폴더와 파일을 만든다.
example.jsx 파일에 들어가 컴포넌트의 틀만 미리 잡는다.
여기서 미리 틀만 잡는 이유는 컴포넌트들의 UI를 실시간으로 확인하기 위해 스토리북을 사용하는데 이미 다 만들어 놓은 뒤에 스토리북을 사용한다면 스토리북의 사용의미가 없다고 생각하기 때문이다.
이제 스토리를 작성한다.
이게 스토리북의 가장 기본 형식이다. 이런식으로 작성하게 되면 스토리북 목차에 아래와 같이 나오게 된다.
이제 Example을 누르고 Example1을 보면서 실시간으로 변하는 UI를 확인하면서 개발을 해나가면 된다.
추가적으로 알아둬야 할 점은 arguments 전달인데, 컴포넌트에 props를 던져줬을때 나타나는 변화를 확인할 수 있다.
위와 같이 arguments(props)들을 전달해주면 된다.
댓글