[StoryBook] React+ StoryBook 사용 예시

우선 나는 이젠 새롭게 개발하는 컴포넌트는 모두 StoryBook을 사용 하려고 한다. 

(이젠 StoryBook 없이 개발하던 시절론 돌아갈 수 없어.. )

오늘 간단하게 소개하려고 한다.

 

StoryBook을 처음 npx로 설치하게 되면

.storybook이 생기게 되고, 여기서 main.js를 통해서 .stories.js 파일 위치를 지정해준다. (읽어올 수 있도록 설정하는 거임) 

module.exports = {
  // stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  stories: ['../src/components/**/*.stories.js'],
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  features: {
    interactionsDebugger: true,
  },
};

 

우리가 일반적으로 알고 있는 js 파일이다.

InfoForm.js

import React from 'react';

const InfoForm = ({ InfoFormModel }) => {
  return (
    <div>
      <span>Inform ID </span>
      <div>{InfoFormModel.id}</div>
      <span>Inform Title </span>
      <div>Title을 입력해 주세요</div>
      <input type="text" defaultValue={InfoFormModel.title} />
      <div>Inform StartDateTime 을 선택하세요</div>
      <span>{InfoFormModel.startDateTime.getFullYear()}</span>
      <div>Inform EndDateTime 을 선택하세요</div>
      <span>{InfoFormModel.endDateTime.getFullYear()}</span>
    </div>
  );
};
export default InfoForm;

 

새롭게 추가한

InfoForm.stories.js 파일 이다. 그냥 데이터만 넣어준 상태임 

import React from 'react';

import InfoForm from './InfoForm';

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

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

export const Default = Template.bind({});
Default.args = {
  InfoFormModel: {
    id: '1',
    title: 'vote',
    desc: 'voteDesc',
    startDateTime: new Date(),
    endDateTime: new Date(),
  },
};

 

yarn storybook을 하게 되면 내가 만들어두었던 InfoForm.stories.js 를 바탕으로 로컬에서 확인해 볼 수 있다. 

 

즉 우리가 실제로 UI를 개발할 때, 라우팅을 통해서 여러 페이지를 이동해야하고, 또 어떠한 경우에는 코드 자동저장을 통해 코드에 한글자만 추가해도 리렌더링 되는 경우가 있을 것이다. 여기다가 마이크로프론트엔드로인해 리렌더링 될때마다 라우팅이 초기로 튕기는 상황까지 겹치게 되면.. (나의 경우가 그러하다.) 한 줄을 고치고 알맞게 고쳐졌는지 확인하러 가는 시간만 해도 오래걸린다. 

 

그러한 상황이 수도없이 반복된다면 .. 개발 효율성 + 집중성이 떨어지게된다.

 

하지만 StoryBook을 사용하게 될 경우에는 UI에만 집중해서 볼 수 있다. 

우리가 보통 props를 전달해주면서 사용 하기 때문에 저런식으로 사용할 수 있다. 

결론 만만세. 

 

오늘은 간단한 예시로만 공부해보았고, 다음엔 좀 더 깊게 포스팅하겠다.