[React] StoryBook 사용하기

컴포넌트 작성

1) src 폴더 안에 Title.js 파일 생성
2) Title.js 파일안에 React 컴포넌트 만들어 export

import React from "react";

// Title 이라는 컴포넌트 완성
const Title = ({title, textColor}) => (
<h1 style={{color: textColor}}>{title}</h1>
);

export default Title;

스토리 작성

1) src 폴더 안에 Title.storise.js 파일 생성
: 컴포넌트파일과 똑같은 파일이름에.stories를 붙여 만들면 알아서 스토리로 인식한다.
2) Title 컴포넌트 임포트

import Title from "./Title";

3) title: 컴포넌트 이름,
component:불러올 컴포넌트이름,
argTypes:컴포넌트에 필요한 전달인자의 종류/ 타입을 지정

export default {
  title: "Practice/Title",
  component: Title,
  argTypes: { title: { control: "text" } },
};

4) 템플릿 생성 : 컴포넌트가 전달인자를 받아 props로 내려주는 템플릿

const Template = (args) => <Title {...args} />;

5) 템플릿 사용 : 스토리 만들기

export const RedTitle = Template.bind({});

전체 코드

import Title from "./Title";
export default {
  //1. practice라는 항목에 Title 리스트가 생김
  // Storybook 상에서 목차 위치/이름
  title: "Practice/Title",
  // 불러올 컴포넌트 셋팅
  component: Title,
  // 컴포넌트에 필요한 전달인자의 종류/타입을 정해줌
  // 지금은 title이라는 전달인자에 text타입이 필요함을 의미
  argTypes: { title: { control: "text" } },
};
// 2. args를 받아서 Title에 속성으로 전달하는 템플릿 생성
const Template = (args) => <Title {...args} />;
// 3. 스토리 맹그는 방법
// practice->Title->안에 RedTitle 템플릿 추가하여 스토리 생성
export const RedTitle = Template.bind({});
// 4. RedTitle 안에 넣어줄 스토리의 전달인자 작성
RedTitle.args = {
  title: "Red Title",
  textColor: "red",
};

• 위의 코드가 StoryBook에 반영된 모습
  1.practice라는 항목에 Title 리스트가 만들어진 모습
  

4. RedTitle 안에 넣어줄 스토리의 전달인자가 반영된 모습
   

• title전달인자에 text 타입이 전달되었지 때문에 text박스가 생성됨!
• 만약 title의 전달인자에 color 타입이 전달 되었다면

export default {
  //practice라는 항목에 Title 리스트가 생김
  title: "Practice/Title",
  component: Title,
  argTypes: { title: { control: "color" } },
};

이렇게 text박스가 아닌 컬러 선택 타입이 생성!