[React & Storybook] 2 - 스토리 작성 방법

이전글에서 기존 리액트 프로젝트에 스토리북을 추가하는 방법을 알아보았다.

[React & Storybook] 1 - 리액트에서 스토리북 사용하기

---

출처 : https://youtu.be/p-LFh5Y89eM

이 글에서는 스토리 작성 방법에 대해 더 자세히 알아보겠다.

 

args

앞선 글에서 스토리는 args(argument)를 사용했을 때 Controls 패널에서 동적으로 값을 바꾸며 결과를 확인할 수 있다고 했다.

 

그렇다면 스토리의 args란 정확히 무엇일까?

 

스토리에서 args란 리액트의 props와 비슷한 의미라고 생각하면 된다.

 

args는 스토리단, 컴포넌트단, 글로벌단에서 정의할 수 있다.

// Story args
Primary.args = {
  primary: true,
  label: 'Button',
};

// Component args
export default {
  title: 'Button',
  component: Button,
  args: {
    primary: true,
  },
};

// Global args
export const args = { theme: 'light' };

만약 글로벌, 컴포넌트, 스토리에 모두 같은 arg를 정의하고 있으면 스토리단에서 정의된 값이 표시된다.

 

CSF

또한 스토리는 Component Story Format (CSF)로 작성된다고 했는데, 그 뜻은 default export로 컴포넌트를 만들고 named exports로 스토리를 만드는 것을 의미한다.

// default export 로 컴포넌트를 만든다
export default {
  title: "Button",
  component: Button,
}

// named exports로 스토리를 만든다
export const Primary = Template.bind({});
Primary.args = {
   primary: true,
   label: 'Button',
};

 

스토리 이름

스토리 이름을 작성할 때는 UpperCamelCase를 사용한다. 즉 PrimaryStory 이런식으로 스토리 이름을 작성한다.

 

만약 스토리이름을 변경하고 싶으면 아래와 같이 변경할 수도 있다.

export const Primary = Template.bind({});
Primary.storyName = "This is story name";

 

Template.bind({})

스토리를 작성할 때 Template과 args를 사용하여 boilerplate를 줄인다고 했다.

 

그렇다면 여기서 Template.bind({}); 는 무엇을 의미할까?

 

.bind({}) 는 자바스크립트에서 function 카피를 만들기 위한 기본 테크닉이다.

 

즉 각 스토리가 Template을 카피하되 각자 다른 프로퍼티를 가지도록 하는 것이다.

 

Parameter

파라미터는 스토리의 정적 metadata를 정의하는 메소드로 스토리 레벨에서 다양한 addon에 configuration을 제공할 수 있다.

 

문서의 공식 예제로 나와있는 코드를 살펴보자.

export default {
  /* 👇 The title prop is optional.
  * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
  * to learn how to generate automatic titles
  */
  title: 'Button',
  component: Button,
  //👇 Creates specific parameters for the story
  parameters: {
    backgrounds: {
      values: [
        { name: 'red', value: '#f00' },
        { name: 'green', value: '#0f0' },
        { name: 'blue', value: '#00f' },
      ],
    },
  },
};

파라미터에서 backgrounds에 세가지 값을 입력하면 상단의 background에 해당 값이 뜨는 것을 확인할 수 있다.

 

그 외에도 Decorator와 play function이 있는데 Decorator는 스토리를 렌더링할 때 컴포넌트를 감싸는 메커니즘을 제공하고 play function은 사용자 개입에 의한 컴포넌트 시나리오를 테스트하도록 도와주는 기능이다.

 

더 자세한 내용은 Decorators 문서와 Play function 문서에서 확인할 수 있다.

---

Reference

- Storybook docs - Write stories