react-native cli 프로젝트에 storybook 적용하는 법

원본 사진 출처  : 나무위키

 

 

1. 설치 (기존 cli 프로젝트에 storybook 추가하기)

 

npx sb@latest init --type react_native

 

2. addon 추가하기 (addon 은 여러 컬러로 바꿔보거나 텍스트를 변경하는 등의 작업을 할수 있게 해줌)

 

// .storybook/main.js에 아래와 같이 작성

module.exports = {
  stories: ['./stories/**/*.stories.?(ts|tsx|js|jsx)','../components/**/*.stories.?(ts|tsx|js|jsx)'],
  addons: [ '@storybook/addon-ondevice-notes',
  '@storybook/addon-ondevice-controls',
  '@storybook/addon-ondevice-backgrounds',
  '@storybook/addon-ondevice-actions',],
};

 

3. App.tsx 파일에 아래 코드 작성해서 export 해주기

 

이 때 원래 있던 코드는 주석 처리하거나 환경변수로 dev 환경일때만 아래 코드가 실행되게 해주어야 한다.

 

나의 경우에는 react-native-config라는 라이브러리를 설치해서 환경변수로 production 환경에서는 실제 코드를 실행하고 development 환경에서는 스토리북을 실행하는 방법을 생각했다.

export { default } from './.storybook';

 

4. metro.config.js 파일에 아래 코드 추가

 

resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },

 리액트 웹 개발할 때에는 webpack과 같은 bundler를 사용하지만 react-native에서는 metro라는 번들러를 사용한다.

 

'SLASH 23 - 달리는 토스 앱에 React Native 엔진 더하기' 라는 영상에 따르면 토스는 빌드 시간을 줄이기 위해 느린 빌드 속도를 가진 metro가 아닌 esbuild로 번들러를 교체해서 빌드 시간을 줄였다고 한다.

 

5.  스토리 작성

개발한 컴포넌트를 임포트해서 아래와 같이 작성해주면 된다.

/* eslint-disable prettier/prettier */
import {MyComponent} from './Profile';
import {View} from 'react-native';
import React from 'react';

export default {
  title: '마이 컴포넌트',
  component: MyComponent,
  args: {
    text: 'text',
    isDisabled: false,
    onPress: () => {
      'press THE BTN';
    },
  },
  decorators: [
    Story => (
      <View>
        <Story />
      </View>
    ),
  ],
};

export const Default = args => <MyComponent {...args} />;
Default.args = {
  
};

 

6.   storybook.requires.js  파일 ( storybook 설치하면 만들어주는 파일)  getStories 함수 안에서 require를 사용하여 스토리를 불러와야한다.

/* do not change this file, it is auto generated by storybook. */

import {
  configure,
  addDecorator,
  addParameters,
  addArgsEnhancer,
  clearDecorators,
} from '@storybook/react-native';

global.STORIES = [
  {
    titlePrefix: '',
    directory: './.storybook/stories',
    files: '**/*.stories.?(ts|tsx|js|jsx)',
    importPathMatcher:
      '^\\.[\\\\/](?:\\.storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
  },
];

import '@storybook/addon-ondevice-controls/register';
import '@storybook/addon-ondevice-actions/register';

import {argsEnhancers} from '@storybook/addon-actions/dist/modern/preset/addArgs';

import {decorators, parameters} from './preview';

if (decorators) {
  if (__DEV__) {
    // stops the warning from showing on every HMR
    require('react-native').LogBox.ignoreLogs([
      '`clearDecorators` is deprecated and will be removed in Storybook 7.0',
    ]);
  }
  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
  clearDecorators();
  decorators.forEach(decorator => addDecorator(decorator));
}

if (parameters) {
  addParameters(parameters);
}

try {
  argsEnhancers.forEach(enhancer => addArgsEnhancer(enhancer));
} catch {}

const getStories = () => {
  return {
    './.storybook/stories/Button/Button.stories.js': require('./stories/Button/Button.stories.js'),
    '../src/components/*.stories.js': require('../src/components/Profile.stories.js'),
  };
};

configure(getStories, module, false);

 

위와 같이 한 후에 npm run android 또는 yarn run android 와 같이 실행하면 에뮬레이터 또는 실제 기기에 스토리북 화면이 보이게 된다.

 

 

참고자료

https://medium.com/@sathishkcontact/managing-multiple-environments-in-react-native-android-ios-scripts-for-different-builds-ea4c5bff6782