react native 에서 storybook

이 포스팅은 스토리북 깃허브의 내용을 따라하며 정리한 글입니다.
storybook 시작하는 방법

storybook 과 app을 바꿔서 사용하는 방법

시작하기

react native 프로젝트를 시작하기 전이라면 시작할때, 스토리북을 설정해줄 수 있다.

• expo 로 시작한다면

npx create-expo-app --template expo-template-storybook [이름]

• React Native CLI로 시작한다면

npx react-native init MyApp --template react-native-template-storybook

으로 시작할 수 있다.

나는 expo 기존 프로젝트에 스토리북을 적용시키고 싶었기에

npx storybook@latest init

를 사용해주었다.

.storybook 폴더가 생기는것을 확인할 수 있다.

metro 파일 업데이트

다음과 같은 코드로 config를 래핑해야한다.

// metro.config.js
const path = require('path');
const { getDefaultConfig } = require('expo/metro-config');
const withStorybook = require('@storybook/react-native/metro/withStorybook');

const config = getDefaultConfig(__dirname);

module.exports = withStorybook(config, {
  enabled: true,
  configPath: path.resolve(__dirname, './.storybook'),
});

나는 기존 코드가 있었기에 이렇게 합쳐주었다.

const { getDefaultConfig } = require("@expo/metro-config");
const withStorybook = require('@storybook/react-native/metro/withStorybook');
const path = require('path');

module.exports = ( () => {
  const config = getDefaultConfig(__dirname);
  const { transformer, resolver } = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...resolver.sourceExts, "svg"]
  };
  config.resolver.assetExts.push("otf"); // 'otf' 확장자 추가

  return withStorybook(config, { // 두 개의 module.exports를 합침
    enabled: true,
    configPath: path.resolve(__dirname, './.storybook'),
  });
})();

그리고 기존의 App.js에서

export default require('./.storybook').default;
// export default App;

이런식으로 스토리북 폴더를 열어주었다.
App을 사용하고 싶다면 주석처리하고 아랫줄 주석을 열어주면 된다.