스토리북 시작
npx -p @storybook/cli sb init
으로 스토리북 생성
- .storybook ⇒ 스토리북 설정파일들
stories ⇒ 만든 스토리북 파일들
export default 객체에서 가질 수 있는 속성들
argTypes
: 객체 형태 (key는 args 이름 / value는 control, actions 등을 담은 객체)control
: 변수를 동적으로 설정 가능- 컴포넌트에서 propTypes를 지정해주면 컨트롤을 주지 않아도 같은 역할을 한다
action
: 콘솔에 데이터 표시 ( https://storybook.js.org/docs/essentials/actions )action: 값
⇒ 에서 값이 name의 속성의 값으로 해서 찍힘type
defaultValue
options
: 값 선택지
데이터 타입 종류
Data Type | Control | Description |
boolean | boolean | Provides a toggle for switching between possible states. argTypes: { active: { control: 'boolean' }} |
number | number | Provides a numeric input to include the range of all possible values. argTypes: { even: { control: { type: 'number', min:1, max:30, step: 2 } }} |
ㅤ | range | Provides a range slider component to include all possible values. argTypes: { odd: { control: { type: 'range', min: 1, max: 30, step: 3 } }} |
object | object | Provides a JSON-based editor component to handle the object's values.Also allows edition in raw mode. argTypes: { user: { control: 'object' }} |
array | object | Provides a JSON-based editor component to handle the values of the array.Also allows edition in raw mode. argTypes: { odd: { control: 'object' }} |
ㅤ | file | Provides a file input component that returns an array of URLs.Can be further customized to accept specific file types. argTypes: { avatar: { control: { type: 'file', accept: '.png' } }} |
enum | radio | Provides a set of radio buttons based on the available options. argTypes: { contact: { control: 'radio', options: ['email', 'phone', 'mail'] }} |
ㅤ | inline-radio | Provides a set of inlined radio buttons based on the available options. argTypes: { contact: { control: 'inline-radio', options: ['email', 'phone', 'mail'] }} |
ㅤ | check | Provides a set of checkbox components for selecting multiple options. argTypes: { contact: { control: 'check', options: ['email', 'phone', 'mail'] }} |
ㅤ | inline-check | Provides a set of inlined checkbox components for selecting multiple options. argTypes: { contact: { control: 'inline-check', options: ['email', 'phone', 'mail'] }} |
ㅤ | select | Provides a drop-down list component to handle single value selection. argTypes: { age: { control: 'select', options: [20, 30, 40, 50] }} |
ㅤ | multi-select | Provides a drop-down list that allows multiple selected values. argTypes: { countries: { control: 'multi-select', options: ['USA', 'Canada', 'Mexico'] }} |
string | text | Provides a freeform text input. argTypes: { label: { control: 'text' }} |
ㅤ | color | Provides a color picker component to handle color values.Can be additionally configured to include a set of color presets. argTypes: { color: { control: { type: 'color', presetColors: ['red', 'green']} }} |
ㅤ | date | Provides a datepicker component to handle date selection. argTypes: { startDate: { control: 'date' }} |
control 예제)
parameters
: https://storybook.js.org/docs/writing-stories/parameters- layout : https://storybook.js.org/docs/configure/story-layout ⇒ 레이아웃의 유형 정의
tags: ['autodocs']
: docs를 자동 생성
스토리북에서 export 하는 두가지 방법
1) 함수 컴포넌트를 할당하기
2) 객체 할당하기 ⇒ 초기값을 줄 수 있음
- 여러개의 복사본을 만들 수 있음
- bind하는 과정은,, 함수(컴포넌트 생성)의 복사본을 만들 필요가 없으면 안 거쳐도 되는 듯. ⇒ 대신 Template을 export 해줘야 함

