cra + typescript + storybook 프로젝트 만들기

💉 react에 storybook 적용하기

react + typescript + storybook 프로젝트를 만들어보려고 합니다.

React 설치

먼저, 타입 스크립트가 적용된 리액트 프로젝트를 생성해보겠습니다.

npx create-react-app 프로젝트명 --typescript

생성된 프로젝트의 src 폴더 에서 안 쓰는 파일들을 지워줍니다.
(필수로 지워야 하는 것은 아닙니다.)

// 삭제 후 목록

src
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
├── reportWebVitals.ts
└── setupTests.ts

storybook 적용

콘솔 창에 아래 명령어를 쳐줍니다.

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

위 명령어를 입력해주시면 root폴더에 .storybook폴더와 src폴더에 stories폴더가 생성됩니다.

.storybook - storybook 설정 폴더
stories - 예제 폴더

※ stories 폴더는 삭제해주셔도 됩니다.

실행방법은 npm run storybook입니다.

npm start 에러 발생

1. npm start에러 발생 시, package-lock.json, yarn.lock와 node_modules를 제거합니다.

2. npm cache clean --force를 입력해 캐시를 지우고

3. npm install을 해주시면 정상 작동됩니다.

예제 만들어보기

src 폴더에 Example.tsx파일을 만들어 줍니다.

// Example.tsx
import React from 'react';

interface Props {
    children?: React.ReactElement | string;
}

function Example({ children }: Props) {
    return <button>{children}</button>;
}

export default Example;

Example.tsx를 storybook으로 보기 위해서는 storybook파일을 생성해줘야 합니다.

// Example.stories.tsx

import React from 'react';
import Example from './Example';

export default {
    title: 'Example'
};

export const Default: React.FC = () => <Example>aa</Example>;

 

export default: 폴더 구조 생성? 이라고 보시면 됩니다.
export const 함수명: 목록에서 보여줄 이름

이렇게 보이시면 성공입니다!

storybook 애드온 적용하기

애드온이란 storybook내에서 다양한 이벤트를 주고 싶을 때 사용합니다.

 

Knobs 설치하기 및 Addon 설정하기

Knobs 에드온은 props를 스토리북에서 설정할 수 있게 해주는 에드온입니다.

yarn add @storybook/addon-knobs --dev

설치한 Knobs 에드온을 적용시키려면,
먼저 ./storybook/main.js와 ./storybook/preview.js를 설정해줘야 합니다.

// main.js

module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/preset-create-react-app',
        '@storybook/addon-knobs/register', // 추가
    ]
};

// preview.js

import { addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs'; // 추가

addDecorator(withKnobs); // 추가

export const parameters = {
    actions: { argTypesRegex: '^on[A-Z].*' }
};

이렇게 설정하시면 파일명.stories.tsx에서 Knobs를 사용할 수 있습니다!
이제 Knobs 에드온을 적용시켜봅시다.

// Example.stories.tsx

import React from 'react';
import { text } from '@storybook/addon-knobs'; // 추가
import Example from './Example';

export default {
    title: 'Example'
};

export const general: React.FC = () => (
    <Example children={text('라벨명', '내용')} />; // 수정
);

저희는 Knobs에서 text를 사용할 겁니다. text는 텍스트를 전달할 수 있는데
위 코드처럼, text('라벨', '내용') 순으로 작성해주시면 됩니다.

라벨명 안에 내용을 바꾸면 버튼 내용이 바뀌는 것을 알 수 있습니다.