StoryBook

StoryBook

참고링크

1. velopert블로그
2. 공식문서
3. Say Hello to Storybook: 스토리북을 통한 React UI 컴포넌트 개발

왜 사용할까

페이지 단위의 개발이 이루어지던 과거와 달리 요즘의 프론트엔드 개발은 주로 컴포넌트 단위로 이루어진다. 원래 컴포넌트는 외부 상태의 영향을 받지않는 독립된 개체로서, 고립된 환경에서도 자신만의 스타일과 상태를 가질 수 있어야 한다. React의 컴포넌트 정의에 따르면, 컴포넌트가 UI를 독립적이고 재사용 가능한 단위로 분리하고 각 단위를 고립해서 생각할 수 있게 해준다고 설명한다.

이런 정의에 따라서 컴포넌트 단위의 개발은 container(로직과 state) 와 presenter(container가 넘겨주는 props에 따라 실제로 보여지는 부분)의 구성으로 이루어지게 되었는데 이런 방식은 개발자가 온전히 뷰에 집중하기 어렵게 한다.

Storybook은 이런 문제를 해결할 수 있는, 컴포넌트 단위의 개발 환경을 지원하는 도구다. 위에서 말한 presenter부분을 독립적으로 묶어줌으로써 뷰를 개발할 때 고립된 환경을 제공해서 관심사를 의존성과 환경으로부터 분리시켜 준다.

설치 방법

리액트 기준

1. CRA x

mkdir 폴더이름
cd 폴더이름
yarn init -y # 또는 npm init -y
npx -p @storybook/cli sb init --type react

2. CRA o

create-react-app 으로 만든 폴더에서
npx -p @storybook/cli sb init --type react_scripts

3. 생성된 디렉토리 모습

• main.js : 스토리를 어디서부터 불러 올지 적혀있다.

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
};

4. src폴더를 생성하고 stories폴더를 src안으로 옮긴 후 코드를 아래와 같이 바꾼다.

stories: ['../src/**/*.stories.js']

• 바뀐 디렉토리 모습

5. 실행 명령어

npm run storybook / yarn storybook

간단한 컴포넌트 만들어보기

1. 간단한 Hello 컴포넌트를 만들기 위해 src폴더 아래 Hello폴더를 만들고 Hello.js파일을 만든다.

• src/Hello/Hello.js

import React from 'react';

const Hello = ({ name, big }) => {
  if (big) {
    return <h1>안녕하세요, {name}!</h1>;
    //big이라는 props가 주어지면 h1을 랜더링
  }
  return <p>안녕하세요, {name}!</p>;
  //아니면 p 랜더링
};

export default Hello;

2. 스토리를 만든다. 스토리를 만들기 위한 확장자는 .stories.js이다.

여기서는 간단한 예제라서 스토리가 하나의 컴포넌트 단위로 만들었는데 스토리는 페이지 단위가 될수도 있다. 그것은 개발자의 선택이다.

• src/Hello/Hello.stores.js

import React from 'react';
import Hello from './Hello';

export default {
  title: 'components|basic/Hello', 
  // title : 스토리북에서 보여질 그룹과 경로를 명시
  component: Hello 
  // component : 어떤 컴포넌트를 문서화 할지 명시
};

export const standard = () => <Hello name="Storybook" />;
export const big = () => <Hello name="Storybook" big />;

• title: export default 를 통하여 객체를 내보낼 때, title 값은 스토리북에서 보여지는 그룹과 경로를 명시한다.

3. 결과 화면

Addon에 따른 StoryBook 사용법

https://storybook.js.org/addons/ addon에 대한 공식문서를 읽어보시는 것을 추천드립니다!

1. Knobs Addon

컴포넌트의 props 를 스토리북 화면에서 바꿔서 바로 반영시켜줄 수 있는 애드온

• 설치 방법

1. 명령어 실행

yarn add --dev @storybook/addon-knobs
또는 npm install --save-dev @storybook/addon-knobs

2. .storybook폴더의 main.js의 addons에 '@storybook/addon-knobs/register'추가한다.

• withKnob라는 함수를 사용하여 애드온은 적용

  • src/Hello/Hello.stories.js

  import React from 'react';
  import Hello from './Hello';
  import { withKnobs } from '@storybook/addon-knobs';
  
  export default {
    title: 'components|basic/Hello', // 스토리북에서 보여질 그    룹과 경로를 명시
    component: Hello, // 어떤 컴포넌트를 문서화 할지 명시
    decorators: [withKnobs] 
    // 애드온 적용
    //export default로 내보내는 객체 안에 decorators 라는 배열을 만들어서 그 안에 withKnobs 를 넣어준다.
  };
  
  export const standard = () => <Hello name="Storybook" />;
  export const big = () => <Hello name="Storybook" big />;

• default 라는 이름으로 Knobs를 사용하는 새로운 스토리 만들기

  • src/Hello/Hello.stories.js

  (...)
  export default {
    title: 'components|basic/Hello', // 스토리북에서 보여질 그룹과 경로를 명시
    component: Hello, // 어떤 컴포넌트를 문서화 할지 명시
    decorators: [withKnobs] // 애드온 적용
  };
  
  export const hello = () => {
    // knobs 만들기
    const big = boolean('big', false);
    const name = text('name', 'Storybook');
    return <Hello name={name} big={big} />;
  };
  hello.story = {
    name: 'Default'
  };
  (...)

  • 결과
  • 아래 Knobs패널에서 big와 name을 바꿔서 state를 직접 변경할 수 있다!

• Knobs 를 사용 할 때 필요한 주요 인자

  1. Knobs 의 이름
  2. 기본값
  3. GROUP ID (optional)
  • 예시

  const big = boolean('big', false, 'Group 1');

2. Actions Addon

컴포넌트를 통하여 특정 함수가 호출됐을 때 어떤 함수가 호출됐는지, 그리고 함수에 어떤 파라미터를 넣어서 호출했는지에 대한 정보를 확인 할 수 있게 하는 애드온

• 액션을 만들 때는 **action('액션 이름')**이라 한다.
• src/Hello/Hello.js

(...)
const Hello = ({ name, big, onHello, onBye }) => {
     return (
    <div>
    {big ? <h1>안녕하세요, {name}!</h1> : <p>안녕하세요, {name}!</p>}
    <div>
        <button onClick={onHello}>Hello</button>
        <button onClick={onBye}>Bye</button>
    </div>
    </div>
    );
};
    (...)

• src/Hello/Hello.js

(...)
import { action } from '@storybook/addon-actions';

export default {
  title: 'components|basic/Hello', // 스토리북에서 보여질 그룹과 경로를 명시
  component: Hello, // 어떤 컴포넌트를 문서화 할지 명시
  decorators: [withKnobs] // 애드온 적용
};

export const hello = () => {
  // knobs 만들기
  const big = boolean('big', false);
  const name = text('name', 'Storybook');
  return (
    <Hello
      name={name}
      big={big}
      onHello={action('onHello')}
      onBye={action('onBye')}
    />
  );
};
(...)

• 결과

3. Story Addon

story source를 패널에서 볼수 있다.

• 설치 방법

1. 명령어 실행

yarn add --dev @storybook/addon-storysource
또는 npm install --save-dev @storybook/addon-storysource

2. .storybook폴더의 main.js의 addons에 '@storybook/addon-storysource'추가한다.

• 결과

---

양이 많아서 계속 업데이트 하겠습니다ㅠㅠ