storybook

eunji lee·2022년 6월 25일

React_

목록 보기

9/10

Storybook이란?

Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구.
컴포넌트의 문서화 도구로도 사용이 가능합니다.

$ npx create-react-app storybook-app --template typescript

-생성시 cra를 통해 적용할 수 도 있음

-웹팩5로 구성된 프로젝트에 적용 가능

$ npx -p @storybook/cli sb init

제대로 설치 되었다면 stories 폴더에 샘플코드 생기고, package.json에 스크립트가 추가됨

#스토리북 시작 명령어. 6006번 포트로 실행됨
yarn storybook
npm run storybook

왜 storybook 인가?

좋다고 하니까 공부해본다.

활용?

UI 컴포넌트 렌더링->테스트
story를 사용할때 어떤 단위로 사용가능한지?
-엘리먼트~page 까지 다양하게 조합 가능
Button, Input 과 같은 엘리먼트 단위의 story 작성
여러 컴포넌트의 조합 단위로 story 작성
페이지 단위의 story 작성

상태관리가 필요한 경우 : reduxaddon 존재

디자인 패턴
문서화 (디자이너와 협업을 위한)

privew.js

export const parameters = {
  actions: { argTypesRegex: '^on.*' },
};

스토리

-function으로 렌더링 된 ui 컴포넌트의 sate를 캡처하여 어떻게 컴포넌트가 렌더링 되는지 보여준다.args 를 가진다.

생성

storiesOf 레거시 API 사용


    storiesOf('Button', module)
      .add('with text', () => (
        <Button onClick={action('clicked')}>Hello Button</Button>
      ))
      .add('with some emoji', () => (
        <Button onClick={action('clicked')}>
          <span role="img" aria-label="so cool">
            😀 😎 👍 💯
          </span>
        </Button>
      ));

2.CSF(Component Story Format)방식으로 컴포넌트 단위

import MyComponent from './MyComponent';

export default {
  title: 'Path/To/MyComponent',
  component: MyComponent,
  decorators: [ ... ],
  parameters: { ... }
}
##(2) named export 가능 

export const Basic = () => <MyComponent />;
export const WithProp = () => <MyComponent prop="value" />;

story format

1) title : 스토리북의 Manager Area에 에 폴더 구조를 통해 나타낼 수 있습니다. '/' 를 통해 계층을 구분할 수 있습니다.

2) component: 명시(addon 사용 시 꼭 필요)

3) Args : pros 와 비슷한 느낌
-Template.bind({})로 템플릿 생성, args 할당
(ex) Args 를 다르게 부여해서 여러개의 story 재사용하는 코드 예시

// Button.stories.ts | Button.stories.tsx

//👇 We create a “template” of how args map to rendering
const Template: Story<ButtonProps> = (args) => <Button {...args} />;

//👇 Each story then reuses that template
export const Primary = Template.bind({});
Primary.args = { background: '#ff0', label: 'Button' };

export const Secondary = Template.bind({});
Secondary.args = { ...Primary.args, label: '😄👍😍💯' };

export const Tertiary = Template.bind({});
Tertiary.args = { ...Primary.args, label: '📚📕📈🤓' };

4) Decorators : 기능적으로 추가적인 렌더링을 통해 감쌀 수 있는 방법
-provider을 감싸야 하는 경우 아래와 같이 적용가능

import React from 'react';

import { ThemeProvider } from 'styled-components';

export const decorators = [
  (Story) => (
    <ThemeProvider theme="default">
      <Story />
    </ThemeProvider>
  ),
];