Storybook에서 React-Redux, Router 사용할 수 있게 설정하기

storybook을 이용해서 상향식 컴포넌트 개발을 하고 있었는데 Redux를 적용하자 storybook에 에러가 났다.

이거 외에도 여러가지 에러들... 내가 router나 redux를 사용하는데 storybook에 관련 설정을 하지 않으면 redux, router 기능을 사용하는 컴포넌트들을 storybook으로 확인할 수 없다.

1. Storybook에서 React Redux 설정하는 법

Storybook에서 사용할 패키지는 .storybook/preview.js 의 decorators 에서 설정할 수 있다.

react-redux를 사용하기 위해서 preview.js에서 다음을 import 한다.
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from '../src/redux/reducers/index';

그러고 decorators의 <Story/> 를 <Provider store={store}/>, <MemoryRouter> 으로 감싸준다.

2. Storybook에서 Router 설정하는 법

Storybook에서 사용할 패키지는 .storybook/preview.js 의 decorators 에서 설정할 수 있다.
1. import { MemoryRouter } from 'react-router-dom'; 를 import 한다.
2. decorators에서 <MemoryRouter/> 로 <Story/>를 감싸준다.

에러를 해결했던 프로젝트의 .storybook /preview.js

/** @type { import('@storybook/react').Preview } */
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from '../src/redux/reducers/index';
import { MemoryRouter } from 'react-router-dom';

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: 'dark', // 기본 배경색을 어둡게 설정
    values: [
      { name: 'dark', value: '#888' }, // 어두운 배경색 추가
    ],
  }
}

const store = createStore(rootReducer);

export const decorators = [
  (Story) => (
    <Provider store={store}>
      <MemoryRouter initialEntries={['/']}>
      <Story/>
      </MemoryRouter>
    </Provider>
  )
]

짜잔! 수정하면 이로케 storybook을 예쁘게 볼 수 있다. ^^

• chromatic에 storybook을 배포해서 웹사이트에서도 확인할 수 있도록 했다.
  chromatic 링크 : https://www.chromatic.com/setup?appId=64be304b12858673479dc015