이번에 Storybook을 한번 사용해보자는 아이디어가 개발 미팅에서 나와서 '이것은 무엇인고' 하고 알아보게 되었다.

Storybook이란?

Component를 개발과 분리하여 독립적인 환경에서 빠르고 쉽게 UI 개발을 도와주는 UI 개발 도구라고 한다. Storybook을 사용하게 되면 전체 UIs 작업을 할 때 특정 데이터를 가져와서 보여주기 위해 데이터베이스에서 강제 조작할 필요도 없고 앱 내 개발 중인 페이지로 이동해서 디자인을 확인하는 등의 귀찮은 작업을 안 해도 된다고 한다.

이것뿐만 아니라 재사용을 위한 컴포넌트들을 조합해서 테스트할 수도 있고 컴포넌트들을 문서화할 수도 있고 UX/UI 디자이너들이 사용하는 Figma 프로그램과 Storybook 컴포넌트들과 동기화할 수 있다고 하니 사용하는 이점은 확실한 것 같다.

설치

공식문서에서는 Expo에 관한 이야기도 있는데 개발 중인 앱은 React Native 프로젝트 이기 때문에 Expo를 사용하는 코드는 사용하지 않았다.

설치 코드:

npx -p @storybook/cli sb init --type react_native 

해당 코드를 실행하면 @storybook/react-native-server를 같이 설치할 것인지 물어보는데 y를 눌러서 같이 설치해준다 그렇지 않으면 후에 수동으로 따로 설치를 해줘야 하는 귀찮은 일이 발생한다.

Config

Storybook 공식 문서는 React 기준으로는 더 잘 설명이 되어 있는데 React Native 관점에서는 주관적으로 부족한 부분이 많은 것 같아서 다른 정보들을 많이 알아보게 되었다.

예를 들어 React Native로 Storybook을 실행시키기 위해서는 App을 실행하면 안 되고 Storybook을 설치하고 나서 자동으로 생긴 Storybook 폴더의 index.js 파일의 StorybookUIRoot을 App.tsx에서 import 해서 실행을 해야 올바로 실행되는 Storybook을 볼 수 있게 된다.

import StorybookUI from './storybook'
import Config from 'react-native-config'

const App = () => {
  return (
    // Your actual app
  )
}

export default Config.LOAD_STORYBOOK === 'true' ? StorybookUI : App

하지만 이런 내용은 공식문서에서 확인할 수 없었다. 그래서 추가적인 리서치가 필요했다. 아님 말고.

다른 필수적이지는 않지만 추가적으로 설정해주면 좋은 것들이 있는데 이것들은 실행 후에 추가적으로 설명을 하도록 하겠다.

실행

실행 방법은 간단하다 나는 yarn을 사용하기 때문에 yarn 코드를 사용한다.

yarn storybook

부팅이 완료되면 새로운 브라우저 윈도우가 나타나면서 이런 화면이 뜬다.
지금 시점에서는 왼쪽 메뉴판이 로딩으로 표시가 될 것이다. 아무런 작동을 하지 않지만 추가 작업을 해줘야 한다.

다음 단계로

yarn ios OR yarn android

실행해서 IOS나 Android의 에뮬레이터를 실행하게 되면 왼쪽에 메뉴판이 로딩 표시에서 Text 화면으로 변경되면서 에뮬레이터에서도 이미지와 같은 화면이 뜬다면 설치와 실행이 성공한 것이다! 이 화면을 보기 위해서 얼마나 삽질을 했는지..

추가적인 Config

우선 실행된 화면을 봤다면 이제 더 수월하게 Storybook을 사용하기 위해 설정해주면 좋을 것들이 있다.

1. AsyncStorage warning 처리

Storybook을 사용하게 되다 보면

WARN Starting Storybook v5.3.0, we require to manually pass an asyncStorage prop. Pass null to disable or use one from @react-native-community or react-native itself.

이런 AsyncStorage 경고를 자주 보게 될 텐데
@react-native-community/async-storage가 없다면 설치해서

const StorybookUIRoot = getStorybookUI({
  asyncStorage: require('@react-native-community/async-storage').default
});

이렇게 처리를 해주면 더 이상 보지 않아도 된다.

2. Storybook Loader

Storybook Loader는 필수적이지 않지만 사용하면 무척 편리한 라이브러리이다.
Story 파일들을 생성할 때마다 해당 파일 경로를 import 해줘야 하는 번거로움을 대신해준다.

설치

yarn add -D react-native-storybook-loader

config

package.json 파일에

{
  "scripts": {
    "prestorybook": "rnstl"
  },

  /* ... */

"config": {
    "react-native-storybook-loader": {
      "searchDir": ["./src/components"],
      "pattern": "**/*.stories.js",
      "outputFile": "./storybook/storyLoader.js"
    }
  },
}

Storybook 폴더에 index.js

import { loadStories } from './storyLoader';

configure(() => {
    loadStories();
}, module);

이렇게 작업을 해주면 yarn storybook을 할 때마다 자동으로 설정한 경로의 스토리 파일들을 읽어와서 import 처리를 해주고 어느 한 폴더에만 스토리 파일을 작업해야 하는 제약에서도 자유로워질 수 있다.

공식문서: https://github.com/elderfo/react-native-storybook-loader#quick-start