이번 게시물에서는 Storybook과 자바스크립트 상태 관리 라이브러리를 함께 사용하는 방법을 알아보겠습니다.
Storybook은 사용자 인터페이스 컴포넌트를 독립적으로 개발하고 테스트할 수 있는 환경을 제공하는 도구입니다. 반면, 자바스크립트 상태 관리 라이브러리는 애플리케이션의 상태를 관리하고 컴포넌트 간의 데이터 공유를 원활하게 해주는 역할을 합니다.
여기서는 Redux를 예시로 들어 Storybook과의 통합 방법을 설명하겠습니다.
설치 및 설정
먼저, Storybook을 설치합니다. 다음 명령어를 사용하세요:
npx -p @storybook/cli sb init
이제 Redux를 설치합니다:
npm install redux react-redux
스토리북 디렉터리 구조
Storybook 프로젝트의 디렉터리 구조 내에서 새로운 디렉터리 src/stories를 생성합니다. 이 디렉터리는 컴포넌트를 Storybook에 추가하기 위한 스토리들을 담을 공간입니다.
스토리 작성
스토리는 Storybook에서 개별 컴포넌트를 보여주는 데 사용됩니다. 여기서는 예시로 Button 컴포넌트를 사용하겠습니다.
src/stories/Button.stories.js 파일을 생성하고 다음과 같이 작성합니다:
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import Button from '../components/Button';
import rootReducer from '../reducers';
export default {
title: 'Button',
component: Button,
};
const store = createStore(rootReducer);
export const Basic = () => (
<Provider store={store}>
<Button label="Click me" />
</Provider>
);
위 코드에서는 Provider 컴포넌트를 사용하여 Redux 스토어를 제공하고, 상태 관리를 위한 store를 생성합니다. 또한 Button 컴포넌트에 label prop을 전달하여 버튼을 렌더링합니다.
스토리북 실행
이제 스토리북을 실행할 준비가 되었습니다. 다음 명령어를 실행해주세요:
npm run storybook
웹 브라우저에서 Storybook이 열리면 Button 컴포넌트와 그에 대한 스토리가 표시될 것입니다. 여기에서는 Basic 스토리가 표시될 것입니다.
결론
이렇게 Storybook과 자바스크립트 상태 관리 라이브러리를 통합하여 개발하는 방법을 알아보았습니다. Redux를 예시로 설명했지만, 다른 상태 관리 라이브러리도 비슷한 방법으로 통합할 수 있습니다. Storybook을 사용하여 컴포넌트를 독립적으로 개발하고 테스트하는 동시에 상태 관리를 효율적으로 수행할 수 있습니다.