React(74) StoryBook으로 UI 컴포넌트 작업하기

스토리북은 UI 컴포넌트 개발을 위한 툴이다.

공통으로 사용되는 UI 컴포넌트들을 개발할 때, 스토리북을 localhost 로 띄워놓고 디자인을 직접 확인할 수 있다.

 

원래 SPA에서 웹으로 ui 컴포넌트를 만들려면 이것저것 세팅을 해야한다.

특히 공통 컴포넌트로 만드려고 하면 기능도 고려를 해야하니 더 손이 많이 간다.

(컴포넌트들로 레이아웃도 만들고 그안에 또 ui 컴포넌트 만들어서 사이즈 맞춰서 집어넣고 등등등 귀찮다)

 

스토리북을 활용하면 간단하게 로컬호스트로 스토리북을 띄워놓고

거기에 테스트할 디자인 컴포넌트를 추가하면 화면으로 ui 요소만 즉각즉각 확인할 수 있다.

 

 

---

React(74) StoryBook 에서 UI 컴포넌트 작업하기

npm 으로 스토리북 설치 후, 셋업은 마친 상황이다.

 

 

Slider.tsx

테스트할 ui 컴포넌트이다. 일반 React 컴포넌트와 똑같다고 생각하면 된다.

import { ReactElement } from 'react';

const Slider = (): ReactElement => {
  return <div>하이</div>;
};

export default Slider;

 

 

index.ts

추후에 다른 컴포넌트들이 추가되면 한꺼번에 export 해서 모아서 내보내는 index 파일이다.

export { default as Slider } from './Slider';
export * from './Slider';

 

 

Slider.stories.tsx

ui 컴포넌트 파일과 + stories 파일은 세트라고 보면 된다. 얘를 통해 컴포넌트가 스토리북에 연결된다.

import { ComponentMeta, ComponentStory } from '@storybook/react';
import { Slider } from './index';

const Template: ComponentStory<typeof Slider> = args => {
  return <Slider />;
};

export const Default = Template.bind({});

export default {
  title: 'Components/Slider',
  component: Slider,
} as ComponentMeta<typeof Slider>;

 

 

터미널에서 아래 명령어를 입력해서 storybook 을 띄워주면 된다.

$ npm run storybook

 

 

결과화면

 

아주 잘나온다