어떤 식으로 스토리북을 사용했을까

스토리북을 사용하다보니 react 컴포넌트를 만들면서 순수한 view를 분리하게 되었다.

.
└── Component
    ├── Component.stories.jsx
    ├── Component.style.js
    └── index.jsx

컴포넌트 구조가 깊어지게 되거나, 컴포넌트 내부에서 api호출이나 contextapi를 사용해야하는 경우 아래와 같이 view를 분리하면서 사용했다.

.
└── Component
    ├── Component.stories.jsx # Component.view.jsx를 Import해서 사용
    ├── Component.style.js
    ├── Component.view.jsx
    └── index.tsx

불편한 점

여러 컴포넌트를 조합해서 페이지를 만들 때, 해당 페이지에 대한 스토리를 만들면서 문제가 생겼다.

몇몇 컴포넌트들은 순수한 view가 아닌 내부에서 api를 호출하고 있었는데, 페이지 스토리를 만들 때 api가 포함된 컴포넌트를 사용하다보니 api 관련 에러가 발생했다.

api를 포함한 컴포넌트의 스토리를 만들 때도 문제가 발생했다. TextInput처럼 모든 상태를 외부에서 넘겨받는 컴포넌트라면 문제가 되지 않는다. 아래처럼 props에 따라 다른 UI를 표시할 수 있다.

export const Default = Template.bind({});
Default.args = {
  name: 'Default',
  placeholder: 'Default',
};

export const WithError = Template.bind({});
WithError.args = {
  name: 'Error',
  placeholder: 'Error',
  isError: true,
  helperText: '에러 입니다.',
};

하지만 컴포넌트 내부 조건에 따라 UI를 변경해야한다면? (api요청)

위의 사진에서 A영역은 컴포넌트가 첫 mounted된 이후 변하지 않는다. 반면, B영역은 로딩 상태에 따라 아래처럼 표시된다.

화면 기록 2022-09-07 오후 11.06.09.mov

1번 해결 방법 - api상태는 msw addon 사용하기

컴포넌트 내부에서 어쩔 수 없이 api를 요청하는 경우 msw addon을 사용하기.