리액트 훅 React hooks와 스토리북 Storybook

리액트 훅 React hooks와 스토리북 Storybook

안녕하세요.

오늘은 리액트로 개발할 때 디자인을 좀 더 디테일하게 나누고 관리할 수 있는 storybook에 관해서 알아보겠습니다.

 

1. 스토리북이란?
2. 사용방법
3. 마치며

 

1. 스토리북이란?

 

리액트로 개발할때 디자인 관리를 어떻게 하시나요?

npm start 혹은 yarn start를 이용하여 프로젝트를 실행하신 뒤 디자인하시나요?

그렇다면 이제는 스토리북을 이용해보실 차례인 것 같습니다.

 

스토리북은 기본적으로 디자인을 관리해주는 오픈소스입니다.

이해하기 조금 애매한가요?

즉 yarn start처럼 리액트를 실행시킨 뒤 즉석으로 디자인을 바꾸고 변화시키는 개념이 아닌,

개별 환경을 통해서 컴포넌트들을 문서화하는 개념에 가깝다고 할 수 있습니다.

또한 이를 통해 컴포넌트의 재사용, 테스팅할 수 있으며, 변화, 변경을 빠르게 확인해 볼 수 있습니다.

 

자 그럼 설치방법을 알아보겠습니다.

설치 방법은 아주 간단합니다.

아래의 커맨드를 통해서 설치할 수 있습니다.

npx sb init

그 뒤 모든 설치 과정이 끝날 때까지 기다리신 뒤, 설치가 끝나면

.storybook 폴더와 sotires 폴더가 생성된 것을 확인할 수 있습니다.

 

개발하시는 스타일에 따라 .storybook 폴더 안 main.js의 stories를 변경 혹은 추가해주시는 것이 좋습니다.

저의 경우 src폴더 안에 components폴더를 생성 그 후 컴포넌트 이름을 딴 폴더(logo) 그 안에 index.tsx파일과 stories라는 폴더
그리고 stories폴더 안에 index.stories.tsx파일을 생성합니다. 이해하기 난해할 수 있으니 아래에 예시를 만들어 놓았습니다.

예시:

src
ㄴ components
  ㄴ logo
    ㄴ index.tsx
    ㄴ stories
      ㄴ index.stories.tsx

아래의 구조를 이용하는 경우 "../src/**/**/*.stories.@(js|jsx|ts|tsx)"를 stories에 넣으시면 됩니다.

또한 다른 구조를 이용하신다면 그에 맞게 코드를 입력해주시면 됩니다.

 자 이제 스토리북을 실행해보겠습니다. 

아래의 커맨드를 통해 스토리북을 실행할 수 있습니다.

// npm
npm run storybook

// yarn
yarn storybook

 

 

2. 사용방법

 

스토리북이 문제없이 실행되었나요? 축하드립니다.

자 그럼 지금부터 사용방법을 알려드리겠습니다.

 

먼저! 일반적인 컴포넌트가 필요합니다.

이를 위해 임의의 컴포넌트를 만들어보겠습니다.

 

export interface Props {
  title: string;
}

const Hello: React.FC<Props> = ({ title }) => {
  return <div>{title}</div>;
};

export default Hello;

 

먼저 컴포넌트를 이해할 수 있도록 설명드리겠습니다.

인터페이스의 경우 저는 타입스크립트를 사용하기 때문에 작성한 것입니다.

자바스크립트로 개발하신다면 필요 없습니다.

 

자 저는 지금 Hello라는 컴포넌트를 작성하였습니다.

title이라는 prop으로 받으며, 그 값이 div에 감싸져 나타나게 됩니다.

즉 title이 Hello이면 Hello로 Bye면 Bye로 값이 나타난다는 것입니다.

그리고 컴포넌트가 다른 파일에 import 될 수 있도록 export 합니다.

 

자 그럼 이제 스토리북에 스토리를 작성해보겠습니다.

 

import { Meta, Story } from "@storybook/react";
import Hello, { Props } from "../index";

const meta: Meta = {
  title: "/components/Test",
  component: Hello,
};

export default meta;

const Template: Story<Props> = (args) => <Hello {...args} />;

export const Default = Template.bind({});
export const Bye = Template.bind({});

Default.args = {
  title: "Hello",
};

Bye.args = {
  title: "Bye",
};

 

먼저 Meta와 Story를 스토리북에서 import 한 뒤,

사용하려는 컴포넌트와 Propstype을 import 합니다.

그 뒤 meta라는 변수를 선언하고 그 안에 타이틀과 컴포넌트를 작성해줍니다.

title의 경우 스토리북 왼쪽에 리스트 형태로 나타나게 됩니다.

아래의 사진을 참고해주세요.

그리고 컴포넌트는 우리가 import 한 즉 사용하려는 컴포넌트를 입력해줍니다.

 

그 뒤 meta를 기본으로 export 합니다.

뒤이어 Template이라는 변수를 선언하고 타입을 Story<Props>로 지정합니다.

여기서 컴포넌트가 props를 가진다면 args 없다면 아무것도 필요 없습니다.

 

그 뒤 Default와 Hello를 생성합니다.(변수 이름은 자유롭게 사용하시면 됩니다.)

그리고 Template으로 bind 합니다.

 

그 뒤 props을 가지는 컴포넌트라면 아래와 같이 Deaulft.args 혹은 Hello.args를 작성해주면 되며,

아무런 props를 가지지 않는다면 필요 없습니다.

 

이해하기 어려운가요? 그렇다면 코드를 복사하여 직접 이것저것 시도해보세요.

그게 가장 빠르게 배울 수 있는 부분이라고 생각됩니다.

 

3. 마치며

 

위의 예시는 아주 간단하고 기본적인 예시입니다.

그 밖에 여러 기능들이 많습니다.

각각 설명드리지 못해 아쉽습니다. 하지만 처음이라면 기초가 어떻게 작성되는지 아는 것으로

스토리북의 시작을 좀 더 원활하게 할 수 있지 않을까 싶습니다.

프론트엔드는 아주 빠르게 변화하고 있습니다.

제가 그만큼 빠르게 반응하여 이런저런 기능들을 설명드리지는 못하지만,

그래도 현업에서 많이 쓰이고 생산성 좋은 기능, 기술들을 알려드리고 싶습니다.

 

저 또한 스토리북 마스터는 아니지만 서로 같이 배워가는 입장에서 한 걸음씩 앞으로 나아가고 싶습니다.

 

항상 제 블로그를 방문해주셔서 감사하고 조금이나마 도움이 될 수 있어 기쁩니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

Es gibt keine perfekte Vorbereitung.
Perfekte Vorbereitung ist das Gleiche, wie nie anzufangen.