도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

리액트 스토리북(React Storybook)을 통한 컴포넌트 개발과 활용 방법 - 1

이 글은 현재 리액트 커뮤니티에서 UI 컴포넌트 개발시에 많이 사용되는 툴인 스토리북에 대한 글입니다. 여기에서는 먼저 스토리북에 대한 간단한 소개와 특징을 알아보고, 실제로 스토리북을 사용 해보면서 다양한 활용 방법과 장점에 대해서 알아보도록 하겠습니다.

이 글은 총 2편으로 구성 되어 있습니다. 이 글에서는 먼저 스토리북 소개, 전체 구조와 설치까지 알아보고 다음편에서 실제로 샘플 프로젝트를 구성 하면서 다양한 활용 방법과 특징을 다뤄보도록 하겠습니다.

스토리북 소개

리액트 스토리북(Storybook)은 UI 컴포넌트를 직접 보면서 개발을 할 수 있는 환경을 제공하는 툴이다. 스토리북은 프로젝트 내에서 독립된 환경으로 실행 되기 때문에, 앱의 특정한 의존성에서 벗어나서 순수 UI 개발에 집중 할 수 있도록 한다. 또한, 스토리북은 리액트 웹(Web) 뿐만 아니라 리액트 네이티브(React Native) 환경에서도 사용 할 수 있다.

스토리북을 활용하면 개발자 본인 뿐 아니라, 팀(기획자, 디자이너)과의 협업 구조에서도 원할한 커뮤니케이션과 빠른 이터레이션(iteration)을 통한 개발 생산성 향상 효과도 누릴 수 있다. UI 개발을 하다 보면 빈번하게 일어나는 디자인 스펙 오류, 기획 프로세스 오류 등을 빠르게 확인 하여 수정 할 수 있으며, 개발자는 컴포넌트를 더욱 유연하고, 재사용 가능한 컴포넌트 개발을 할 수 있도록 도와준다.

스토리북의 경우 현재 많은 회사에서 사용 하고 있는데, Airbnb, Slack, Coursera 등과 많은 리액트 오픈소스 프로젝트에서 사용 되고 있다. (https://storybook.js.org/examples/)

Storybook references

스토리북 구조



스토리북은 크게 세가지 파트로 분류 된다:

  • Manager App: 모든 스토리가 나열되는 곳. 여기서 선택된 스토리를 프리뷰 패널에서 확인 할 수 있다.
  • Preview Panel: 매니저 앱에서 선택된 스토리(컴포넌트)가 렌더링 되는 곳
  • Add-on Panel: 다양한 애드온을 통해 컴포넌트와 인터렉션을 하거나 컴포넌트 정보등을 보여주는 곳으로 기본 설치시 Action Logger 패널이 추가되어 있다.

애드온(Addons)

스토리북의 가장 큰 장점 중에 하나는 애드온을 통해 다양한 기능을 쉽게 추가 할 수 있다는 데 있다.

애드온은 크게 두가지로 분류 되어 있다:

  • Decorator - 스토리(컴포넌트)의 래핑 컴포넌트(Wrapping Component)로써, 컴포넌트를 중앙에 위치 시킨다거나 배경색을 변경 한다거나 하는 방법 등으로 다양하게 활용 할 수 있다. 각각의 스토리마다 chaining function으로 사용 할 수도 있고, 글로벌로 선언하여 모든 스토리에 적용되게 할 수 있다.  
  • Native Addons - 스토리북의 새로운 기능을 추가해준다. 애드온 갤러리에 있는 애드온을 설치하여 사용 하거나 직접 개발하여 추가 할 수 있다.

스토리북 설치

얼마전 스토리북 버전이 3.0으로 업데이트 되었기 때문에, 업데이트 된 3.0 기준으로 설명하도록 하겠다.

create-react-app (CRA)을 기반으로 설치를 진행 하도록 하겠다. 

CRA가 설치 되어 있지 않다면 먼저 CRA를 설치한다.

npm i -g create-react-app

설치가 완료 되면, 프로젝트를 생성한다.

create-react-app story

storybook cli를 설치한다.

npm i -g @storybook/cli

설치가 완료 됐다면 방금 프로젝트 폴더 (story)로 이동한 후, getstorybook 명령어를 실행한다.

cd my-react-app && getstorybook

package.json을 확인 해보면,

{
"name": "story",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4"
},
"devDependencies": {
"react-scripts": "1.0.7",
"@storybook/react": "^3.0.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build-storybook": "build-storybook -s public"

}
}

@storybook/react 패키지와 storybook, build-storybook scripts가 생성 된 걸 확인 할 수 있다. 또한, 프로젝트 폴더내에 .storybook 폴더와 src/stories폴더와 샘플 스토리 파일들이 생성 된 걸 확인 할 수 있다.

.storybook 폴더는 addons.js와 config.js가 있는데, 파일이름에서 짐작 할 수 있듯이 config.js는 스토리북의 전체적인 설정을 하는 파일(여기에서 작성된 스토리를 불러들이거나 글로벌 애드온을 세팅 한다.)이고, addons.js는 다양한 애드온을 등록 하는 곳이다. .storybook 폴더안에 webpack.config.js, head.html 등을 추가하여 기본으로 설정된 스토리북 환경을 수정 할 수 있다.

src/stories 폴더는 예제 스토리와 컴포넌트로써, 폴더 구조와 파일이름의 강제성은 없다. 

스토리북을 실행 시켜 보자. 터미널에서 npm run storybook으로 스토리북을 실행하면 된다.

localhost:9009로 이동하면 아래와 같은 화면을 확인 할 수 있을 것이다.


 

이번 화는 여기에서 마무리 하는 것으로 하고, 다음에는 직접 샘플 프로젝트를 만들어 보면서 스토리북의 다양한 애드온과 활용 방법에 대해서 알아보도록 하겠습니다. 감사합니다.


리뷰