[Storybook] 리액트 스토리북 사용하기 _TypeScript

 

 

TypeScript를 사용하는 리액트 컴포넌트의 스토리 작성하기

 

🗒 story book이란?

story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. UI 테스트뿐만 아니라 컴포넌트 문서화의 도구로도 사용할 수 있습니다. 스토리북은 React와 Vue, Angular 등의 다양한 프레임워크와 사용할 수 있습니다.

 

 

---

 

🗒 스토리북 사용하기 

아래 버튼 중에서 선택 완료 버튼 컴포넌트를 만들고 스토리를 작성해 보면서 UI 테스트를 해 볼겁니당

 

 

 📁 SaveBtn.tsx

import React, { useState } from "react";
import Button from "@mui/material/Button";

export interface SaveTextProps {
  text: string;
}

const SaveBtn = (props: SaveTextProps) => {
  return (
      <Button variant="contained">
        {props.text}
      </Button>
  );
};

export default SaveBtn;

스토리북을 통해 UI 테스트를 할 SaveBtn 컴포넌트입니다.

 

이제 위의 SaveBtn 컴포넌트의 스토리를 작성해봅시다.

 

 📁 SaveBtn.Stories.tsx

 

• Meta: Meta 타입으로 컴포넌트 정보를 작성합니다.
• title: 스토리북에서 보여질 해당 컴포넌트의 이름입니다.
• component: 스토리북에서 나타낼 컴포넌트를 지정합니다.
• Template: 템플릿을 통해 컴포넌트를 세팅합니다.

import SaveBtn, { SaveTextProps } from ".";
import React from "react";
import { Meta, Story } from "@storybook/react";

export default {
  title: "선택 완료 버튼",
  component: SaveBtn,
} as Meta;

const Template: Story<SaveTextProps> = (args) => <SaveBtn {...args} />;

export const Basic = Template.bind({});
Basic.args = { text: "선택 완료" }; // 텍스트 디폴트값 설정

 

이제 npm run storybook 명령어를 실행하면 해당 컴포넌트의 스토리를 볼 수 있습니다.

text 부분은 원하는 텍스트를 입력하는 대로 바로 적용되는 것을 볼 수 있습니다.