Story 작성하기

오호·2022년 2월 9일

UI storybook test

지난 챕터에서는 스토리북에 대해 알아보고 설치 방법과 스토리북을 실제로 작동시켜보았다.

이번 챕터에서는 story들을 작성해보고 사용해보자.

1. Story?

스토리북은 말 그대로 story라는 것들을 하나의 책처럼 모아둔 애플리케이션이라고 할 수 있다.

각각의 스토리들은 컴포넌트의 시각적 상태를 보여준다. 우리의 역할은 리액트 애플리케이션에서 각각의 상태에 맞는 스토리를 작성하는 것이다.

2. Story 작성하기

버튼의 스토리를 직접 작성해보자.

우리는 스토리를 작성할 때 총 세 개의 파일이 필요하다.

첫 번째는 컴포넌트 파일이다. 우리의 케이스에선 button 컴포넌트를 의미한다.

두 번째는 버튼 컴포넌트와 관련된 스타일이 작성된 파일이다.

세 번째가 바로 컴포넌트와 일치하는 스토리 파일이다.

일단 이 세 개의 파일을 한 폴더에 묶어서 관리해 볼 것이다.

src 폴더 밑에 components 폴더 그리고 밑에 Button이라는 폴더를 만든다.

그리고 Button.css , Button.js, Button.stories.js 파일을 생성한다.

~~하나의 폴더에 관리하니까 조직적인 느낌이 강한데 앱이 더 커지면 어떨지는 아직 모르겠다. 디렉토리 구조를 잘 설계할 필요성이 느껴진다..~~

2.1 컴포넌트 작성하기

버튼 컴포넌트를 만들어보자.

먼저 두 개의 클래스를 갖는데 variant는 props로 전달받는다. 또한 children도 사용하는 컴포넌트에서 전달받는 방식으로 해서 재사용성을 높여준다.

button
variant(default 값으로 'primary')

import React from 'react';
import './Button.css';

const Button = (props) => {
  const { variant = 'primary', children, ...rest } = props;
  return (
    <>
      <button className={`button ${variant}`} {...rest}>
        {children}
      </button>
    </>
  );
};

export default Button;

2.2 스타일링

button 클래스와 더불어 4개의 클래스를 추가해보자.

.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
}

.primary {
  background-color: #008cba;
}

.secondary {
  background-color: #e7e7e7;
}

.success {
  background-color: #4caf50;
}

.danger {
  background-color: #f44336;
}

2.3 story 작성하기

드디어 스토리를 작성해보자.

2.3.1 title

component story format 이라는 형식으로 작성해 볼 것이다. 이 형식은 export default를 가지고 하나 또는 이상의 export를 갖는다.

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

export default {
  title: 'Button',
};

객체 형태를 export default 하는데 title이라는 프로퍼티를 의무적으로 써줘야한다. 이 타이틀은 리액트 애플리케이션 전체에서 유니크해야한다. 또한 title은 storybook 애플리케이션 좌측 네비게이션 패널에 렌더링된다.

2.3.2 component

두 번째는 component프로퍼티이다.

export default {
  title: 'Button',
  component: Button,
};

import한 버튼 컴포넌트를 적어주면 된다. 필수 프로퍼티는 아니다. 하지만 addon과 의존 관계를 갖기 때문에 적어주는게 좋다.

2.3.3 export

위에서 작성한 default문에는 story에 대한 정보들을 작성해두었다. 이 export에서는 구체적인 네임으로 리액트 컴포넌트를 export 한다. 여기서 export 하는 것들이 스토리를 대표한다.

우리는 이 버튼 스토리에서 variant에 따라 버튼이 어떻게 시각화되는지를 알고 싶다. 위에서 작성한 네 가지 경우에 대해서 작성해보자.

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;
export const Success = () => <Button variant="success">Success</Button>;
export const Danger = () => <Button variant="danger">Danger</Button>;