[RN] Storybook 연결하기

📱테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

---

storybook 사용하는 방법을 작성해보도록 하겠다.

진짜 ChatGPT 에게 2일을 넘게 물어봤는데 안된다고만하고 그짓말만 쳐서

진짜 삽질이란 삽질은 다하고 구글링을 통해 열심히 뒤져서

겨우겨우 완성했다 ..

나는 CLI 환경에서 개발을 하고있고

스토리북은 8.5 버전을 사용했으니 참고 부탁한다.

Storybook 8.5

npx storybook@latest init

을 해주면 .rnstorybook 을 만들어준다.

 

하고나면 이런 폴더가 생길건데, 이제 컴포넌트들은 stories 에 넣어놓고

사용하면된다. 해당 컴포넌트들은 기본예제로 같이 생성된다.

// metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};
// set your own config here 👆

const finalConfig = mergeConfig(defaultConfig, config);

module.exports = withStorybook(finalConfig, {
  // Set to false to remove storybook specific options
  // you can also use a env variable to set this
  enabled: true,
  // Path to your storybook config
  configPath: path.resolve(__dirname, './.rnstorybook'),

  // Optional websockets configuration
  // Starts a websocket server on the specified port and host on metro start
  // websockets: {
  //   port: 7007,
  //   host: 'localhost',
  // },
});

요고 그대로 가져다가 쓰고

"storybook-generate": "sb-rn-get-stories"

package.json 을 확인해보면 scripts 쪽에 이런게 있을것이다.

이걸 실행하게되면 자동으로 .stories.tsx 파일들을 수집해준다고 한다.

이러고 이제

yarn ios

yarn android

를 해주면 끝~

해당 화면은 이런식으로 조절해가면서 쓰면된다.

import StorybookUIRoot from './.rnstorybook';
...

const SHOW_STORYBOOK = __DEV__ && true;

...

const App = () => {
	...
    if (SHOW_STORYBOOK) {
    	return <StorybookUIRoot />;
  	}
    ...
    
    return (
    	...
    )
}