Skip to content
Search

Storybook

lastmod 2026-03-08created 2022-09-1911 edits

Storybook is a tool for developing and testing UI components in isolation, separate from the app.

Key features

  • Isolated component rendering: view a single component without running the app
  • Controls: test by changing props from the UI in real time (color, size, text, etc.)
  • Docs: automatic generation of component API documentation
  • Testing various states: define each state (loading, error, empty data, etc.) as a "story"
  • Visual regression testing: detect broken UI by comparing snapshots

Component-Driven Development (component-driven development; CDD)

As the Storybook guide also mentions, Storybook is emphasized as a good tool for developing alongside the CDD methodology.

Component-Driven Development, briefly: it is a development methodology that builds UIs using components as modular elements. In other words, you start from basic components, build "bottom-up," and combine them incrementally.

Pros

  • Quality: build components separately and define their states to verify they work across various scenarios
  • Durability: finds bugs down to the details.
  • Speed: assemble quickly by reusing basic components.
  • Efficiency: the decomposed basic components can be developed in parallel (split up).

The design structure is divided into three parts.

  • Component
  • Container (a combination of two or more components)
  • Page (two or more containers)

There is also Korean: 크로마틱 (Chromatic), a testing tool recommended by Storybook.

Component Story Format (CSF)

As the name suggests, Storybook is written in units of Stories.

Components are defined and used in Story files, which is called Component Story Format (CSF). (A file containing Stories is a CSF file.)

These files are for development only, so rest assured they are not included in the bundle on deployment.

A standalone server runs on a separate port (usually 6006), and you write a .stories.tsx file for each component:

Pros and cons

Pros:

  • Industry standard, rich ecosystem
  • Automated Controls/Docs
  • Good for collaborating with designers
  • Plenty of add-ons (a11y, viewport, etc.)

Cons:

  • Heavy dependencies (dozens of packages)
  • Complex configuration
  • Story files need maintenance
  • Longer build times

Skills

Basic usage

A Story simply provides its metadata via export default. 

// Button.stories.ts | .tsx
import type { Meta } from "@storybook/react";

import { Button } from "./Button";

const meta: Meta<typeof Button> = {
  component: Button,
};

export default meta;  // 메타데이터 export default

Defining stories 

type Story = StoryObj<typeof Button>;

// Button에 대해 Primary 정의가 필요하다면 해당 컴포넌트를 사용한 Story 타입으로 export 합니다.
export const Primary: Story = {
  args: { variant: 'primary', children: 'Click me' },
};

export const PrimaryCustomRender: Story = {
  render: () => <Button primary label="Button" />,
};

export const Disabled: Story = {
  args: { variant: 'primary', disabled: true, children: 'Disabled' },
};

Using React Hooks 

// Button.stories.ts | .tsx
// ..위 와 같이 메타데이터 export default
type Story = StoryObj<typeof Button>;

const ButtonWithHooks = () => {
  const [cnt, setCnt] = useState(0);

  const handleOnChange = () => {
    setCnt((prev) => prev + 1);
  };
  return <Button primary={isPrimary} onClick={handleOnChange} />;
};

export const Primary: Story = {
  name: "I am the primary",
  render: () => <ButtonWithHooks />,
};

You can also create components that use React hooks. Of course, you need to define one more render that renders a component using those hooks.

See also

Favorite site

author Zer0 sitemap