[StoryBook] 스토리북 적용하기

스토리북이란 컴포넌트의 다양한 경우를 정리할 수 있게 도와주는 시각화 도구이다.

 

 

 

컴포넌트들을 시각적으로 볼 수 있게 해주는것은 물론 각 컴포넌트를 문서화 해주는 역할까지 가지고 있다.

 

따라서 디자이너와 협업을 할때 보다 쉬운 피드백이 가능하며 개발자와의 협업에서도 매우 뛰어난 효율을 보여줄 수 있다. 또한 storybook과 jest를 활용하여 컴포넌트를 불러온 후 테스트코드를 작성하는 것도 가능하다.

 

 

 

https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/

Storybook Tutorials

 

 

 

 

 

 

 

스토리북의 가장큰 장점중 하나는 매우매우 간편하다는 것이다.

 

 

스토리북을 만들 리액트 프로젝트 하나를 CRA를 활용하여 만들어주자.

npm create-react-app storybook

 

 

프로젝트를 하나 만들었다면 아래 명령어로스토리북을 설치해주자.

 

npx sb init

 

 

 

위와 같이 설치가 완료되면 아래와 같이  .storybook과 stories 파일이 생성된다.

 

 

.storybook -> 스토리북에 대한 전역적인 파일들을 세팅

stories -> 실제 보여질 컴포넌트들(스토리) 이 담겨있다.

 

기본적인 예시로는 아래와 같이 버튼 컴포넌트들이 들어가 있다.

 

 

 

실제로 내가만든 컴포넌트들을 스토리북에 올리기 위해서 간단한 컴포넌트를 하나 만들어보자.

 

import React from "react";

const Test = ({ font }) => {
  return (
    <div
      style={{
        width: "300px",
        height: "300px",
        margin: "auto",
        marginTop: "10rem",
        background: "green",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        color: "white",
        borderRadius: "20px",
        fontSize: `${font}px`,
      }}
    >
      나는 예시 컴포넌트
    </div>
  );
};

/* STYLE */

export default Test;

 

 

 

App.js 에 방금만든 간단한 컴포넌트를 연결해준다.

 

import logo from "./logo.svg";
import "./App.css";
import Test from "./Test";

function App() {
  return <Test font={40}></Test>;
}

export default App;

 

 

 

이제 스토리를 만들어 보자. 스토리의 가장 단순한 구조는 아래처럼 생겼다.

 

 

// 스토리북에 대한 설정
export default {

	title: 스토리북에 들어가는 component폴더 구조
	component: 컴포넌트 이름
}

export const 스토리이름 = () => 컴포넌트가 들어갈 자리

 

 

stories 폴더 안에 Test.stories.js 파일을 만들어보자.

 

 

 

 

//stories/Test.sotries.js

import React from "react";
import Test from "../Test";

// 컴포넌트를 불러온 후 이름을 정해준다.
export default {
  title: "stories/Test",
  component: Test,
};

// 기본 템플릿을 설정
const Template = (args) => <Test {...args} />;

// 폰트 크기에 따른 스토리들을 제어
export const Small = Template.bind({});
Small.args = {
  font: 20,
};

export const Large = Template.bind({});
Large.args = {
  font: 40,
};

 

 

이후 위처럼 방금 만든 간단한 컴포넌트들에 대해 스토리를 만들어보자. 글자 크기가 다른 두개의 스토리를 만들어보았다.

 

스토리북을 다시 보면 아래처럼 Test스토리가 두개 나온것을 확인할 수 있으며

 

 

 

 

 

 

 

 

인자가 다르게 들어간 두개의 컴포넌트 상황을 확인할 수 있게 되었다!!