storybook 기초

Storybook 계층구조

(.storybook/ main.ts)
|
.storybook/preview.ts
|
각 컴포넌트.stories.tsx
|
(meta - 단일story)

Storybook이란?

UI 컴포넌트의 스냅샷을 문서화하기 위한 도구, 분리된 UI컴포넌트를 체계적으로 구축 가능하게 한다.
보통 디자인 시스템 개발을 위해 사용됨. 다양한 애드온을 통해 기능을 확장시킬 수 있고, 프론트엔드 독립적으로 개발 가능(mock-service-worker등 사용)

개별컴포넌트.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import 실제컴포넌트 from './실제컴포넌트위치';

const meta = {
  component: 실제컴포넌트, // 해당 스토리가 다루는 실제 React 컴포넌트 지정
} satisfies Meta<typeof 실제컴포넌트>;

export default meta;

type Story = StoryObj<typeof meta>;

export const 기본표시: Story = {};

주로 스니펫으로 사용하는 storybook폼이다.

• meta : 컴포넌트에 대한 메타데이터 정의 (이 컴포넌트 한정 모든 스토리에 적용됨)
• 기본표시 : '기본표시'라는 이름으로 스토리북개발서버에서 보여줄 스토리의 이름에 해당

meta 혹은 개별스토리에 추가적인 설정가능 ={
parageters: 스토리의 동작을 제어하는 추가 정보
argTypes: 컴포넌트 props에 대한 컨트롤 정의,
args: 컴포넌트에 전달할 기본 props설정,
decorators: 스토리 렌더링 시 컴포넌트를 추가적인 마크업 또는 컨텍스트로 감쌀 수 있음

	```
    decorators: [
    	(Story,ctx) => { // ctx안에는 argTypes,args등 스토리에 대한 정보가 담김
        	... msw로직, router프로바이더 등 로직 추가
            return <Story />
        }
    ]
    ```

}

decorators

decorators 배열에는 Story컴포넌트를 반환하는데 여러번 반환 가능, 기억해야할건 마지막에 호출된 컴포넌트 최종 반영

decorators : [
	Story => {
    	console.log('두번째 호출')
        const {control} = useFormContext()
        const value = useWatch({name:'', control})
        alert(value)
        
    	return <Story/>
        },
    Story => {
    	console.log('첫번째 호출')
    	return <RHForm><Story /></RHForm>
    }
] // console.log결과 : '첫번째 호출' '두번째 호출'

중요한 점은 두번째 호출된 Story컴포넌트에 RHForm에 연결된 폼의 정보를 담고 있음.

개념적용 => 스토리북 라우팅 버그 with msw

decorators: [
	withRouter,
    Story => {
    	worker.resetHandlers(...)
        ...
    	return <Story/>
    }
]

스토리북에서 msw를 사용할때 라우팅과 관련해 문제가 발생했는데, withRouter(라우터provider를 스토리 컴포넌트에 감싸는 HOC) 를 msw로직 이후에 적용시키는걸로 문제 해결