React + Typesciprt 환경에서 StoryBook 활용하기

안녕하세요! 9기 SSAFYcial 전인혁 기자입니다.

저는 요즘 자율프로젝트의 4주차를 향해

열심히 달려가고 있답니다.

오늘 전달드릴 내용은 유용한 프론트엔드 지식입니다!

 

이번 기사의 주제는 바로바로~!~!

React + Typesciprt 환경에서 StoryBook 활용하기 입니다.

 

프로젝트시, 팀의 프론트엔드로서 UI개발을 할 때

주로 컴포넌트 단위로 개발을 하곤합니다.

 

컴포넌트가 잘 만들어졌나 확인할 때,

매번 페이지 컴포넌트에서 import 하여 테스트하기에는 한계가 있습니다.

 

오늘 소개드릴 StoryBook이라는 라이브러리는

구현한 컴포넌트를 독립된 환경에서 테스트해볼 수 있도록 도와준답니다!

 

지금부터 한 번 살펴볼까요? 💨💨

---

StoryBook이란?

🎤 스토리북의 공식 페이지에서는,
'UI 구성요소와 페이지를 독립적으로 구축하기 위한 프런트엔드 워크숍' 이라고 소개하고 있습니다.

 

Storybook: Frontend workshop for UI development

 

즉, 스토리북은 UI 컴포넌트가 실제로 어떻게 보여지는지 시각적인 테스트를 할 수 있도록

독립적인 환경을 제공해주는 라이브러리라고 할 수 있겠습니다.

 

오늘 기사는 공식 페이지의 docs를 참고하여 작성하였습니다.

 

 

 

StoryBook 사용해보기

🎤 프로젝트 개발 환경을 구축하고, StoryBook을 직접 활용해보겠습니다.

 

React + Typescript 프로젝트 생성하기

제가 직접만든 jeonny-boilerplate 패키지를 활용해 프로젝트를 생성해보겠습니다.

아래 두 줄만 입력하면, Typescript 환경의 React 프로젝트가 뚝딱 만들어진답니다.

# jeonny-boilerplate를 전역에 설치
npm i -g jeonny-boilerplate

# create-jb-app 명령어로 storybook-practice 프로젝트 생성
npx create-jb-app storybook-practice

# 프로젝트 경로로 이동 후, 프로젝트 실행
cd storybook-practice/react
npm start

 

 

 

프로젝트에 StoryBook 설치하기

스토리북을 간단히 세팅할 수 있도록, 공식으로 Storybook CLI를 제공하고 있습니다.

명령어 한줄로 간단하게 세팅해보겠습니다.

 

// 프로젝트의 루트에서 다음 명령어 실행
npx -p @storybook/cli sb init --type react_scripts

 

이렇게 물어보면, 살포시 y를 입력해줍시다.

 

jeonny-boilerplate에는 기본적으로 ESLint도 함께 세팅되어 있기 때문에,

아래와 같이 ESLint 관련 플러그인을 설치할거냐 물어봅니다.

Y를 입력해줍니다.

 

설치완료!

설치가 완료되면 터미널에 아래와 같은 문구가 출력됩니다.

이때, storybook이 자동 실행되는데 일단 종료해줍니다. (터미널에서 ctrl + c)

 

 

 

생성된 파일 확인 및 정리

스토리북이 잘 설치되었다면,

프로젝트 루트에는 .storybook 디렉토리가, /src에는 stories 디렉토리가 생성됩니다.

 

.storybook은 스토리북의 설정을 관리하는 파일들이 들어있는 폴더이고,

stories는 기본적으로 설치되는 예제파일들 입니다.

 

저희는 예제를 사용하지 않을 것이기에, stories 디렉토리는 과감히 삭제해줍니다.

 

 

 

프로젝트에서 StoryBook 활용하기

스토리북을 사용하기 위해, 버튼 컴포넌트를 하나 만들어 보겠습니다.

 

프로젝트의 components 폴더에 Button 디렉토리를 만들고, 새로운 파일 Button.tsx을 작성합니다.

import React from 'react';

interface IButtonProps {
	text: string;
}

function Button(props: IButtonProps) {
	const { text } = props;

	return (
		<button type="button" onClick={() => alert(`안녕 나는 ${text}`)}>
			{text}
		</button>
	);
}

export default Button;

 

 

이러한 컴포넌트를 스토리북에서 테스트하려면, 해당 버튼에 대한 story를 만들어주어야 합니다.

Button 디렉토리에 새로운 파일 Button.stories.tsx을 작성합니다.

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

import Button from './Button';

const meta: Meta<typeof Button> = {
	component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
	name: 'Button',
	render: () => <Button />,
};

 

테스트를 원하는 컴포넌트마다 스토리파일을 작성해주어야 하는데,

매번 작성하기 번거로워서, 간단한 스니펫을 만들어보았습니다!

 

프로젝트 루트의 .vscode에 새로운 파일 storybook.code-snippets을 만들어 작성해줍니다.

{
	"Storybook Default": {
	  "scope": "typescript,typescriptreact",
	  "prefix": "sbd",
	  "body": [
		"import React from 'react';",
		"import type { Meta, StoryObj } from '@storybook/react';",
		"",
		"import ${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}} from './${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}}';",
		"",
		"const meta: Meta<typeof ${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}}> = {",
		"\tcomponent:${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}},",
		"};",
		"",
		"export default meta;",
		"type Story = StoryObj<typeof ${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}}>;",
		"",
		"export const Primary: Story = {",
		"\tname:'${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}}',",
		"\trender:()=> <${1:${TM_FILENAME_BASE/.(?:story|stories).*//gi}}/>",
		"}"
	  ],
	  "description": "storybook default snippet for React+TS By Jeonny"
	},
  }

 

이제 아래와 같이, sbd만 입력해도 스토리 파일을 편하게 작성할 수 있답니다!

 

Button.stories.tsx 파일의 15번줄에서,

Button에 text를 props으로 넘겨줍니다.

 

이제 모든 준비가 완료되었습니다!

 

새로운 터미널을 열어서, 스토리북을 실행시켜줍니다.

// 스토리북 실행
npm run storybook

 

콘솔에 다음과 같이 6006 포트에 스토리북이 열렸다고 안내해주고,

창이 하나 열리면서, 스토리북 대시보드가 보입니다!

 

 

 

대시보드 왼쪽에는 컴포넌트의 목록이 보여지고, 오른쪽 화면에서는 선택된 컴포넌트가 렌더링됩니다.

버튼을 클릭하면 다음과 같이 이벤트도 즉시 실행된답니다!

 

여기까지, 스토리북의 기초 사용법을 알아보았습니다.

 

지금까지 소개드린 내용은 극히 일부이며,

스토리북의 활용 범위는 매우 넓기 때문에 자세한 사용법은 스토리북 공식문서를 참고해주시면 감사하겠습니다!

 

 

 

마치며 ...

SSAFY에서 매 프로젝트마다 새로운 기술들을 도입해보며 느낀점이 하나 있습니다.

 

'배울게 정말 끊임없이 많은데, 배우는데는 다 이유가 있다'는 것입니다.

왜 배우지? 싶다가도 실제 사용해보면 정말 편리했던 경험이 대부분이었기 때문입니다.

 

공부하는게 잠깐 괴로워도, 편해질 미래를 생각하면서 더 열심히 배워야겠습니다.

화이팅 !

 

 

 

이상으로 기사 마치겠습니다 😊

SSAFYcial 기자 전인혁입니다.

 

 

 

 

이번 기사가 현재 SSAFY 교육생 이거나, SSAFY에 관심이 있으신 분들에게  많은 도움이 되었으면 좋겠습니다.

궁금하신 점이 있다면, 댓글로 꼭! 꼭! 남겨주세요 🙏🏻

 

 

 

---

" 읽어주셔서 감사합니다!

더 재밌고 유익한 기사와 함께 돌아오겠습니다 "