스토리북 작성 방법

Posted on

스토리북 작성 방법

리액트와 함께 스토리북을 작성해보자. 스토리북을 작성하면 코드 작성에 따라 문서가 자동으로 생성되기 때문에 협업을 하기 편리하다.

일단 컴포넌트를 아래와 같이 작성하였다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { string, oneOf } from 'prop-types';

const HomeLink = ({as:Comp, lang, className, children, ...restProps}) =>{
return (<> 
    <Comp lang = {lang} className = {className}><a href ="www.google.co.kr">{children}</a></Comp>
</>);
};

HomeLink.defaultProps = {
    as : 'h1',
    lang: 'en',
    className: string
}

HomeLink.propTypes = {
    /** 제목 요소를 설정합니다. */
    as: oneOf(['h1','h2','h3','h4','h5','h6']),
    /** 언어를 지정할 수 있습니다. (스크린 리더 음성 변경 됨) */
    lang: oneOf(['en', 'ko']),
    /** 클래스 이름을 추가할 수 있습니다. */
    className: string,
}

export default HomeLink;

여기서 기본값인 defaultProps를 작성하고 props에 대한 타입을 지정하기 위해 propTypes를 설정한다. 타입스크립트의 경우 이부분은 생략할 수 있다. 만든 컴포넌트는 다시 내보낸다.

이제 만든 파일에 대한 스토리를 작성한다. 스토리 파일은 아래와 같이 작성할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import HomeLink from "./HomeLink";
import { Logo } from "components";

export default {
    title: 'Components/UI/HomeLink',
    component: HomeLink,
    parameters:{
        docs: {
            description:{
                component: '홈 링크 입니다.'
            }
      }
      
    },
    argTypes: {
        children:{
            table: {disable: true},
        }
    }
};

const Template = (args) => <HomeLink {...args}/>;

export const Img = Template.bind({});
Img.args = {as: 'h1', children:<Logo></Logo>};
Img.storyName = '홈 링크 (이미지)';


export const Text = Template.bind({});
Text.args = {as: 'h1', children:'111'};
Text.storyName = '홈 링크 (텍스트)';

같은 경로에 HomeLink.stories.js를 생성하고 스토리 파일을 작성한다. export default안에 있는 블럭은 각각 다음과 같다.

  • title : 스토리 파일 내에서 경로 설정
  • componenet : 해당 컴포넌트에 대한 설명
  • table : 스토리북 내에서 props의 표시 유무를 설정하는 값. 기본적으론 false이며 이 값이 true로 변경하는 경우 스토리북 내에서 해당 props가 보이지 않게 된다.

props값에 따라 컴포넌트가 어떻게 변화하는지 보고 싶은 경우에는 템플릿을 작성하여 이를 보여줄 수 있다. Template를 선언하고 여기에 객체를 바인딩하여 내가 전달하고자 하는 props를 매개변수로 전달한다. 이 때 storyName을 통해 스토리북 내에서 표시될 이름을 설정할 수 있다.