실제 리액트 앱 실행없이 컴포넌트 만들기

기존의 리액트 프로젝트에 다음 명령어를 실행하여 스토리북을 설치하면 된다.

npx -p @storybook/cli sb init

2022 2.25 기준 스토리북의 버전이 6.3으로 설치가 되어서, 공식문서 핸즈온을 따라하는 중에 웹팩 빌드 에러가 났었다.

이와 관련하여 webpack storybook 핸즈온 에러를 구글링해 보았고, 해결 방안은 다음과 같다.

스토리북 버전 6.3이 웹팩 버전 5를 사용하는데 터미널에서는 그냥 기본 웹팩 4버전으로 빌드를 하려고 해서 에러가 났던 것 같다.

관련 링크

npm install @storybook/builder-webpack5 @storybook/manager-webpack5 --save-dev

//Then edit your .storybook/main.js config:

module.exports = {
  core: {
    builder: 'webpack5',
  },
};

1. 컴포넌트를 만들기 위해 src 디렉토리에 단위 컴포넌트가 될 파일과, 단위 컴포넌트 파일의 스토리 파일을 다음과 같이 만든다.

컴포넌트이름.js
컴포넌트이름.stories.js

컴포넌트가 어떤 상태를 가질 수 있을지 생각하고, 파일을 작성하는 것이 중요하다.

예를 들어 투두리스트 컴포넌트를 만든다고 생각했을 때, 기본 상태, 중요 상태, 완료 상태 이렇게 세 가지로 표현을 하고 싶다면, 세가지 상태를 두어야 한다. 스토리북에서는 하나의 컴포넌트가 세개의 상태를 가지고 있으니 세 개의 스토리로 만들어줘야 한다.