[React] 스토리북에 다양한 확장 도구(Addon) 추가

2020/09/29 - [Web프론트엔드/리액트] - [React] 리액트 기초 관련 글 정리 (개발환경, 데이터, 컴포넌트 등)

2020/10/06 - [Web프론트엔드/리액트] - [React] 재활용 가능한 기본적인 Input 컴포넌트

2020/10/06 - [Web프론트엔드/리액트] - [React] 테스트 도구인 스토리북(storybook)을 사용해보자

---

 지난 시간에는 스토리북 설치와 실행을 해보았습니다. 이번에는 스토리북에 자주 사용하는 확장 도구 JSX, actions 두 가지를 추가해보겠습니다. 이 두 가지 말고도 다양한 Addon이 있으니 공식 사이트를 확인 바랍니다.

 

1. addon-jsx

 첫 번째로 스토리북 화면에서 바로 JSX코드를 확인할 수 있는 확장 도구입니다. 먼저 프롬프트 창에서 설치를 합니다.

> yarn add --dev storybook-addon-jsx

스토리북을 추가했던 커맨드와 유사합니다. 설치가 끝나면 구성 폴더인 .storybook폴더에 addons.js파일을 추가하고

// ..\test_project\.storybook\addons.js

// 확장 도구의 레지스터 추가
import "storybook-addon-jsx/register";

이처럼 코드를 넣어줍니다. 다음으로 지난 시간에 만들었던 config.js를 열어 아래와 같이 설정합니다.

 

// ..\test_project\.storybook\config.js

import { configure, setAddon } from "@storybook/react";
import interopRequireDefault from "babel-runtime/helpers/interopRequireDefault";
import JSXAddon from "storybook-addon-jsx";

function startStories() {
  // 해당폴더에 Story이름이 들어간 파일 require목록 생성
  const cont = require.context("../src/stories", true, /Story/);
  // 위에서 만든 목록을 require로 추가
  cont.keys().forEach((srcFile) => {
    interopRequireDefault(cont(srcFile));
  });
}

setAddon(JSXAddon);
configure(startStories, module);

 

 확장 도구마다 추가하는 방법이 조금씩 다르지만, addon-jsx는 꼭 setAddon()를 해줘야 합니다. 마지막으로 사용하고 싶은 스토리 컴포넌트(파일)를 열어, add() 메서드가 아닌 addWithJSX() 메서드를 사용합니다.

 

// ..\test_project\src\stories\Story_Testinput.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import Input from "../components/Input";

storiesOf("Test Input", module)
  .addWithJSX("base", () => <Input name="name" />)
  .addWithJSX("label", () => <Input name="name" label="라벨" />);

 

 절차가 조금 복잡해 보이지만 한번 설정하면, 소스를 보지 않고도 바로 JSX 상태를 아래처럼 확인이 가능합니다. 만약 JSX창이 보이지 않으면, 왼쪽 위의 Storybook로고 옆의 (...)버튼을 누르고 "Show addons" 체크를 확인하세요.

JSX 확장 도구

2. addon-actions

 두 번째로 컴포넌트에서 발생하는 특정 액션(이벤트)에 로그를 붙일 수 있는 기능입니다. 브라우저의 개발자 도구를 확인하지 않고도 로그를 볼 수 있기 때문에 강력하게 추천하는 확장 도구입니다. 그럼 프롬프트 창으로 가시죠!

yarn add --dev @storybook/addon-actions@5.3.0

마지막에 붙인 숫자는 버전 번호인데 붙이지 않으면 최신 버전이 설치됩니다. 이번에는 스토리북의 버전과 맞혔습니다.

 

위에서 설명한 addons.js파일에 레지스터를 등록합니다.

// ..\test_project\.storybook\addons.js

// 확장 도구의 레지스터 추가
import "storybook-addon-jsx/register";
import "@storybook/addon-actions/register";

 

 addon-jsx 같은 경우는 config.js에 setAddon()를 해줬지만, 이번에는 그럴 필요 없이 바로 사용이 가능합니다. 그럼 위에서와 마찬가지로 Story_TestInput.jsx를 열어 onChange 이벤트와 action() 로그 함수를 추가합니다.

 

// ..\test_project\src\stories\Story_TestInput.jsx

import React from "react";
import { storiesOf } from "@storybook/react";
import Input from "../components/Input";
import { action } from "@storybook/addon-actions";

storiesOf("Test Input", module)
  .addWithJSX("base", () => <Input name="name" />)
  .addWithJSX("label", () => <Input name="name" label="라벨" />)
  .addWithJSX("onChange", () => (
    <Input name="name" onChange={action("onChange 이벤트")} />
  ));

 

 addon-actions 같은 경우는 config.js에 별다른 추가가 없었지만, 여기에는 action를 임포트하고 함수 형태로 사용합니다. 인수로는 로그 창에 남길 문자열을 넣습니다. 그럼 아래 화면처럼 Actions탭이 보입니다.

Actions 확장 도구

 

 오늘은 여기까지 입니다. 앞으로 배울 컴포넌트 스타일 관련 포스팅은 스토리북을 적극 이용하겠습니다.

스토리북을 잘 이용하면 다양한 기능과 스타일의 컴포넌트를 정리 및 수집해놓을 수 있습니다.

또한 협업이나 팀 프로젝트의 경우, 업무 분담의 용이함과 버그 테스트에서도 좋습니다.

 

참 편하죠?

---

2020/10/07 - [Web프론트엔드/리액트] - [React] 컴포넌트에 스타일을 적용해보자 ① Text