스토리북에서 useState Hook 사용하기

 

✔️ 필요성

스토리북은 내가 만든 컴포넌트의 디자인과 간단한 액션을 너무 깔끔하고 쉽게 볼 수 있는 라이브러리이다.

 

제일 간단한 유형이 아래처럼 사용하는 것이다

import React from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import Tab from "../components/elements/Tab";

export default {
  title: "element/Tab",
  component: Tab,
} as ComponentMeta<typeof Tab>;

const Template: ComponentStory<typeof Tab> = (args) => (
  <Tab {...args}/>;
)

export const TabExample = Template.bind({});
TabExample.args = {
  tabList: ["서비스", "데이터"],
};

 

 

 

✔️ 문제 확인

스토리북에서 확인하려면 useState 구문을 통해서 state를 관리해줘야할 때가 있는데, 그 때는 아래처럼 쓰면 된다.

import React, { useState } from "react";
import { ComponentMeta, ComponentStory } from "@storybook/react";
import StickyTab from "../components/elements/Tab";

export default {
  title: "element/Tab",
  component: Tab,
} as ComponentMeta<typeof Tab>;

const Template: ComponentStory<typeof Tab> = (args) => {
  const [tabIndex, setTabIndex] = useState(0);
  return <Tab {...args} tabIndex={tabIndex} setTabIndex={setTabIndex} />;
};

export const TabExample = Template.bind({});
TabExample.args = {
  tabList: ["서비스", "데이터"],
};