[React] storybook(CDD)

CDD를 지원하는 도구인 Component Explorer(컴포넌트 탐색기)

StoryBook 

컴포넌트 탐색기의 UI 개발 도구 중 하나

컴포넌트들을 따로 볼 수 있게 구성하여 한 번에 하나의 컴포넌트에서 작업할 수 있음

 

특징

1. 재사용성을 확대하기 위해 컴포넌트를 문서화하고 자동으로 시각화함

- 다양한 테스트 상태를 확인할 수 있음

- 버그를 사전에 방지

- 테스트 및 개발 속도 향상

- 의존성을 걱정하지 않고 빌드할 수 있음

 

2. 독립적인 개발 환경에서 실행됨

- 다양한 상황에 구애받지 않고 UI 컴포넌트를 개발할 수 있음

회사 내부에서 UI 라이브러리로 사용하거나, 외부 공개용 디자인 시스템을 개발하기 위한 기본 플랫폼으로 사용

 

주요 기능

- UI 컴포넌트를 카탈로그화

- 컴포넌트 변화를 stories로 저장

- 핫 모듈 리로딩(자동업데이트)같은 개발 툴 제공

- 리액트를 포함한 다양한 뷰 레이어 지원(다른 라이브러리, 프레임워크에서도 사용가능)

 

설치

npx create-react-app 프로젝트명
npx storybook init

// 실행
npm run storybook

 

사용

기본 컴포넌트가 담긴 js파일과 storybook에서 사용할 js파일 작성

(Title.stories.js에서 컴포넌트를 구현해도 되지만 어차피 후에 재사용하려면 파일을 나눠줘야 함)

Title.js

// Title.js

export const Title ({title, textColor}) {
  // 컴포넌트 구현
  return <h1 style={{color: textColor}}>{title}</h1>
}

Title.stories.js

// Title.stories.js
import React from 'react'
import { Title } from './Title' // Title.js의 Title 컴포넌트 임포트

export default { // storybook에 알려줄 형식 작성
  title: 'Example/Title', // 카테고리 지정(Example 내의 Title에서 확인 가능)
  component: Title // 카테고리에서 확인할 컴포넌트 지정
};

// 템플릿 작성. 이 템플릿과 bind 메서드를 사용하여 아래에서 예시를 확인함
const Template = (args) => <Title {...args} />

// 위 템플릿 복사(export를 사용해 storybook으로 내보내기)
// 속성 지정
export const BlueTitle = Template.bind({});
BlueTitle.args = {
  textColor: "blue",
  title: "Blue Title"
}

 

 

+)

position

static (기본값) :위치를 지정하지 않을 때 사용한다.

relative : 위치를 계산할때 static의 원래 위치부터 계산한다.

absolute : 원래 위치와 상관없이 위치를 지정할 수 있나 부모 요소를 기준으로 위치가 결정됨

fixed : 원래 위치(상위 요소)와 상관없이 브라우저 화면의 상대 위치를 기준으로 위치를 지정.

화면이 바뀌더라도 고정된 위치를 설정 할 수 있음

 

position: fixed;
left: 0; // 요소를 왼쪽 끝에 위치시키기
right: 0; // 요소를 오른쪽 끝에 위치시키기
// left와 right를 동시에 0으로 설정하면 요소의 크기가 왼쪽 끝부터 오른쪽 끝까지 확장
top: 0; // 요소를 위쪽 끝에 위치시키기
bottom: 0; // 요소를 아래쪽 끝에 위치시키기
// top과 bottom을 동시에 0으로 설정하면 요소의 크기가 위쪽 끝부터 아래쪽 끝까지 확장

// left, right, top, bottom을 모두 0으로 설정하면 전체 화면으로 크기 확장

 

transition: [적용하고싶은속성,] 시간 

부드럽게 나타나기(사라지기)

 

calc(표현식)

width: calc(100% - 80px);
// 100%에서 양쪽으로 40px씩 빼고 공간 차지

width: calc(100% / 3);
// 33.3%만큼 공간 차지

 

이벤트 버블링

상위 요소에 이벤트를 지정했는데

후손(자식포함) 요소에도 동일한 이벤트가 발생하는 현상

 

- 상위 요소와 후손요소를 분리하거나

- 동일한 이벤트에 stopPropagation을 호출해줌

<div onClick={(event) => event.stopPropagation()}> </div>

 

 

 

 

참고
https://electronic-moongchi.tistory.com/26

 

22.12.23

코스 S3U3