storybook study

Storybook Loaders

1. Loaders란?

Storybook의 loader는 스토리 렌더링 전에 데이터를 로드하는 함수입니다. API 요청, 데이터 초기화 등의 작업을 수행할 수 있습니다.

2. Loaders 실행 흐름 다이어그램

• 모든 로더는 병렬로 실행되며 로더의 결과는 context: {loaded}에 저장됩니다.
• 같은 키를 사용할 경우 stories > global의 우선순위를 갖습니다.

3. 예제 코드

import React from "react";
import { Meta, StoryObj } from "@storybook/react";
import { Link } from "./Link"; 

export default {
  title: "Components/Link",
  component: Link,
  loaders: [
    async () => {
      return {
        href: "https://www.daleui.com",
      };
    },
  ],
} as Meta<typeof Link>;

export const LoadersLink: StoryObj<typeof Link> = {
  render: (args, context) => {
    const { href } = context.loaded;
    return (
     <Link {...args} href={href} />
    );
  },
  args: {
    children: "Loaders",
  },
};

Storybook Tags

1. Tags란?

Storybook의 태그를 통해 Storybook 내에서 스토리를 필터링하거나, 특정 조건에서 동작을 조정할 수 있습니다.
태그는 프로젝트 단위, 메타 단위, 스토리 단위로 적용할 수 있으며, !${태그}를 사용해 태그를 제거할 수 있습니다.
또한 사용자정의 태그를 추가하여 Admin User를 나눌 수 있습니다.

2. 주요 태그

태그	설명
autodocs	자동으로 문서를 생성할 때 사용합니다.
experimental	실험적인 기능을 사용할 때 지정할 수 있습니다.
deprecated	더 이상 사용되지 않는 컴포넌트나 기능을 표시할 때 사용합니다.
disable	특정 스토리를 Storybook에서 숨길 때 사용합니다.
wip	아직 작업 중인 스토리를 나타낼 때 사용합니다.
dev	개발 중인 기능이나 내부 테스트용 스토리를 나타낼 때 사용합니다.
test	테스트 목적의 스토리를 구분할 때 사용합니다.

3. 예제 코드

const preview: Preview = {
  ...
  tags: ["autodocs"],
};

export default preview;