[#. Storybook] React+Typescript+Storybook 시작하기

 

 

 

 

 

 

 

 

 

 

① react 프로젝트에 storybook 설치 및 실행

 

 

⑴ 설치

 

$ npx create-react-app [프로젝트명] --template typescript

 

아래 명령어들은 react 프로젝트 경로에서 입력한다

 

$ npx sb init

 

 

⑵ 실행

 

 

# npm
$ npm run storybook

# yarn
$ yarn storybook

 

 

 

 

@ npm run storybook 했지만 실행 에러 발생했을 경우

 

1. package-lock.json, yarn.lock, node_modules 삭제
2. npm cache clean --force
3. npm install

 

 

 

아래 화면이 잘 뜨면 된다

 

 

 

 

@ 기존 React 프로젝트에 typescript 적용할 경우

 

# npm
npm install typescript @types/node @types/react @types/react-dom @types/jest

# yarn
yarn add typescript @types/node @types/react @types/react-dom @types/jest

 

 

 

 

 

 

② Story 작성하기

 

 

⑴ stories/Title.tsx

 

import React from "react"

export interface TitleProps {
  text?: string
}

function Title({ text }: TitleProps) {
  return <div>{ text }</div>
}

export default Title

 

 

⑵ stories/Title.stories.tsx

 

import React from "react"

import { Meta, Story } from "@storybook/react"
import Title, { TitleProps } from "./Title"

export default {
  title: "Components/Title",
  component: Title,
} as Meta

const Template: Story<TitleProps> = (args) => <Title {...args} />

export const Basic = Template.bind();
Basic.args = { text: '제목!' }

// 혹은

export const Top = (args) => <Title {...args} />
Top.args = { text: '제목!' }

 

 

 

 

 

 

 

 

 

 

 

 

@ storybook에서 Prop에 설명 추가하기

 

 

interface Props {
  /**
   * description 추가하기
   */
  title?: string
  label?: string
  isPassword?: boolean
  validators?: any[]
  onChange?: (values: any) => void
  disabled?: boolean
}

 

 

 

 

 

이렇게 Description 탭에서 type 위에 표시된다

 

 

 

 

 

 

 

 

 

 

 

https://storybook.js.org/docs/react/get-started/install

Install Storybook