[StoryBook] : 스토리북이 뭐지?

Atomic Design Pattern에 대해서 공부하고 지금 하고 있는 프로젝트에서 Storybook을 적용해서 컴포넌트를 관리하면 좋을 것 같다는 생각이 들었다. 

 

2023.07.20 - [⌨️ Web Front-End/NextJs] - [Design Pattern] : Atomic Design (아토믹 디자인)

 

사실 처음 리액트를 배웠을 Storybook에 대해서 들었지만 그때는 리액트조차 이해하지 못한 상태라서 그냥 듣고 넘겼는데 갑자기 떠올랐다. 

 

시니어분에게 적용하면 좋을 것 같다고 말씀을 드렸는데... 사실 뭘 할 줄 알아야 적용할 텐데.. 그래서 며칠 전부터 시간 될 때마다 공식문서와 블로그들을 참고해서 기본 세팅과 버튼 정도 구분하는 것까지 해보았다.

---

1. StoryBook이란?

StoryBook은 간단하게 설명하면 컴포넌트 개발을 위한 라이브러리고 보면 된다. 개별 컴포넌트별로  어떻게 사용되는지 쉽게 알 수 있고, 테스트도 가능하다고 한다.  그리고 해당 컴포넌트에 대한 문서도 자동으로 만들어준다. (매우 만족)

---

2. 도입하고 싶은 이유

내가 StoryBook을 도입해보고 싶은 이유는 

•  Atomic Design Pattern을 사용하게 되면 많은 컴포넌트를 만들어야 하는데 관리가 용이할 것이라고 생각했다.
• 문서를 자동으로 만들어준다는 이점! (두 번 일하고 싶지 않다.)
• 테스트에도 용이 
• 마지막은 개인적으로 궁금해서 

---

3. 적용하기

StoryBook 설치

(저는 NextJs , TypeScript를 사용하고 있습니다.)

npm install --save-dev storybook@next

간단하게 설치 후 

 

StoryBook 초기화 작업

npx storybook@next init

 

초기화까지 완료되었다면 

 

StoryBook 실행

npm run storybook

아래 이미지와 같은 화면이 나온다 (기본 작업을 한 거라서 화면이 다를 수 있음)

default - ButtonBasic

코드를 살펴보면 storeis라는 폴더가 보인다. 여기 기본 코드들이 들어있다. (참고용으로 좋음)

 

stories - 폴더 생성됨

 

처음에는 이 폴더 안에서 BasicButton.tsx , BasicButton.stories.tsx , ButtonBasic.scss 파일을 다 넣어서 했는데, 경로 세팅이 잘 되어있는지 component 폴더에 stories.tsx 파일을 생성해도 잘 되었다.

 

📝 BasicButton.stories.tsx  (아래 코드 참고)

import BasicButton from './BasicButton';
import type { Meta, StoryObj } from '@storybook/react';
import styles from '@styles/components/form/basicButton.module.scss';

const meta: Meta<typeof BasicButton> = {
  component: BasicButton, //사용할 컴포넌트 작성하기!
  title: 'ATOM/ButtonBasic', // ATOM(큰 카테고리) / 하위 트리구조
  //자동으로 문서 작성을 하기 위해서는 아래 코드 추가 필요!
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof BasicButton>;

// 여기까지가 기본작업 아래부터 여러가지 컴포넌트 형태를 만드는 부분


export const Primary: Story = {
  name: 'default', //이름 변경가능 없으면 Primary로 나옴
  //args => 넘겨줄 prop 관련된 객체 형태
  args: {
    className: [styles.btn],
    title: '버튼',
    click: () => '',
    disabled: false,
    kind: '',
  },
};


export const StorageButton: Story = {
  name: 'storage', //이름 변경가능,
  args: {
    className: [styles.btn, 'blue'],
    title: '적용',
    click: () => '',
    disabled: false,
    kind: 'storage',
  },
};

export const PrintButton: Story = {
  name: 'print', //이름 변경가능,
  args: {
    className: [styles.btn, 'teal'],
    title: '출력',
    click: () => '',
    disabled: false,
    kind: 'print',
  },
};

 

위 코드는 튜토리얼을 보고 버튼 컴포넌트와 관련된 부분만 먼저 만들어보았다. 처음엔 이 부분도 너무 헷갈려서 고생을 했다...

돌아보니 단순하다.🤦🏻‍♂️ 

기본 버튼 컴포넌트를 설정하고 나머지는 변경되는 내용만 넣으면 완성 (실행 시 나오는 화면 참고)

문서를 자동으로 만들어준 코드를 넣으니 짜잔~

 

DOC - ButtonBasic

 

이렇게 해당 컴포넌트에 대한 정보들이 나온다. (Postman같음)

---

4. 결론

사실 아직 ATOM 단계, 버튼 하나만 해본 상태라 이후 더 다양한 기능을 적용해 볼 예정이다. 최소한 페이지 단위는 아니라도 분자 형태, 유기체 단계까지 컴포넌트를 만들어야 하지 않을까?

처음이라 배우는 시간도 걸리고 적응하려면 힘들 것 같긴 하지만...  많은 컴포넌트를 사용한다면 이후에 굉장히 편리할 것 같다. 

(공식문서를 보고 좀 더 공부하고 또 다음번에 이어서 포스팅해 봐야겠다.)

 

---

참고링크

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/