Introduction to Storybook

컴포넌트 챌린지에서 만든 컴포넌트들을 어떻게 보여줄 것이냐, 바로 스토리북을 이용해서 보여줄 것이다.

페이지를 새로 만들어서 보여주는 것보다 스토리북을 이용해 간편하게 보여줄 수 있고, 또 이름만 들어보고 사용해본 적이 없는 기술이라 이번에 공부도 해 볼 겸 시도해보도록 한다.

프로젝트 디렉토리에 들어가 다음과 같은 명령어를 입력해 스토리북 프로젝트를 만든다.

npx storybook init --type html

디렉토리 안에 다음과 같이 .storybook과 stories라는 디렉토리가 새로 생겼다. 여기서 우리가 주의 깊게 볼 디렉토리는 바로 stories라는 디렉토리이다.

일단 다음의 명령어를 입력하여 스토리북 프로젝트를 실행하도록 하자.

npm run storybook

다음과 같이 첫 페이지가 보이며 스토리북을 시작할 수 있게 되었다!

스토리

스토리북에서 스토리란 하나의 UI 컴포넌트가 가질 수 있는 상태를 캡쳐하여, 이 상태의 컴포너트를 어떻게 렌더링할 수 있을지를 정해주는 함수를 이야기한다. 하나의 컴포넌트는 여러 상태를 가질 수 있다. 해당 컴포넌트가 가질 수 있는 특정한 상태를 이에 해당하는 스토리를 만들어 보여줄 수 있다.

해당 컴포넌트가 가질 수 있는 특정한 상태를 설명하는 스토리를 만들어 해당 상태를 보여줄 수 있다.

예를 들어, 텍스트 버튼에 대한 스토리를 만들어보자. TextButton.stories.js 파일을 다음과 같이 작성할 수 있다.

// TextButton.stories.js

export default {
  title: 'TextButton',
};

export const Primary = () => {  // Primary라는 스토리.
  const btn = document.createElement('button');
  btn.innerText = 'Button';

  btn.className = [
    'storybook-button', // button.css에 존재하는 스타일
    'storybook-button--medium',
    'storybook-button--primary',
  ].join(' ');

  return btn;
};

TextButton이라는 컴포넌트의 상태 중 하나를 나타내주는 Primary 스토리를 만들었다. 하나의 스토리 안에는 해당 컴포넌트 요소를 자바스크립트로 만들고 이 상태에 해당하는 클래스를 바인딩 해 준 다음, 이 컴포넌트 요소를 리턴한다.

이렇게 리턴된 스토리를 스토리북에서 타이틀 이름/스토리 이름에서 확인할 수 있다.