Achievement Goals
•
컴포넌트 기반 Bottom-up 방식 개발이 무엇인지 이해한다.
•
컴포넌트 UI 개발에 도움을 주는 라이브러리인 Storybook을 활용할 수 있다.
•
구조적으로 CSS를 작성하는 방법의 발전과 이유에 대해서 이해한다.
•
컴포넌트 기반 CSS 작성에 도움을 주는 라이브러리인 Styled-Component를 활용할 수 있다.
•
DOM Reference를 활용하기 위한 useRef Hook을 활용할 수 있다.
Component-Driven Development (CDD)
디자인과 개발 단계에서부터 재사용할 수 있는 ui컴포넌트를 만들어 부품 단위로 ui 컴포넌트를 만들어나가는 개발 방법
컴포넌트 생성 → 컴포넌트 결합 → 페이지 조립
Storybook
CDD 개발을 지원하는 UI 개발 도구
component explorer 컴포넌트 탐색기 도구로 CDD가 트렌드로 자리잡으면서 등장
특징
•
각각의 컴포넌트를 따로 볼 수 있도록 구성되어 한번에 하나의 컴포넌트에서 작업 가능
•
컴포넌트의 재사용성을 확대하기 위해 컴포넌트를 문서화
•
자동으로 컴포넌트를 시각화하여 다양한 테스트 상태를 만들어 볼 수 있어 버그를 사전에 방지 가능
•
테스트 및 개발 속도 향상
•
의존성을 걱정하지 않고 빌드 가능
•
UI 라이브러리로 활용하기 때문에 애플리케이션과 독립적인 개발 환경에서 실행 → 전체 UI 한눈에 파악 가능
왜 사용하는지?
storybook은 독립적인 개발환경에서 실행되므로 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 ui컴포넌트를 집중적으로 개발할 수 있음
회사의 내부 개발자들을 위해 문서화(documentation)를 하여 회사의 UI 라이브러리로써 사용하거나,
외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용
주요 기능
•
UI 컴포넌트들을 카탈로그화
•
컴포넌트 변화를 stories로 저장하기
•
핫 모듈 재 로딩과 같은 개발 툴 경험 제공하기
•
리액트를 포함한 다양한 뷰 레이어 지원하기
시작하기
설치
# Create our application:
npx create-react-app taskbox
cd taskbox
# Add Storybook:
npx -p @storybook/cli sb init
Plain Text
복사
사용법
예시
import React from "react";
import { Button } from "@storybook/react/demo";
export default {
title: "Button",
component: Button
};
export const Primary = () => (
<Button>Hello Button</Button>
);
export const Secondary = () => (
<Button>Bye Button</Button>
);
JavaScript
복사
예시