StoryBook 사용 - 번역

스토리북을 통한 리액트 컴포넌트 도큐멘팅

(출저 : https://medium.com/@emmabostian/documenting-react-components-with-storybook-6c83abe7cb29 )

스토리 북이란?

스토리 북은 UI 컴포넌트를 위한 놀이터로 시장을 주도하고 있으며 주요 내용은 "스토리 작성"입니다.
스토리 북은 스토리 개념을 사용하여 구성 요소를 문서화합니다.
일반적으로 스토리에는 시각적 테스트 사례와 같은 단일 컴포넌트의 상태가 포함됩니다.
기술적으로 스토리는 화면에 렌더링 할 수있는 것을 반환하는 함수입니다.
컴포넌트 스토리 북에는 다양한 컴포넌트에 대한 다양한 스토리가 포함됩니다.
우리가 작성하는 각 스토리에는 다음과 같은 단일 상태가 포함됩니다.

Storybook의 장점은 React, Vue, React Native, Angular 등과 같은 많은 인기있는 프런트 엔드 프레임 워크 및 라이브러리와 함께 작동한다는 것입니다.

설정
이 튜토리얼에서는 2019 년 5 월 ReactJS Girls London에서 제공 한 React 강연을 통해 건물 설계 시스템에 스토리 북을 추가 할 예정입니다.
코드를 따르거나 저장소 에서 최종 코드를 확인하실 수 있습니다.

1. 프로젝트 디렉토리로 변경하고 종속성을 설치하십시오 (필요한 경우).
   나는 디렉토리를 변경하지 않아서 왜 아무것도 작동하지 않는지 알아 내려고 10 분을 버렸습니다..

그런 다음 Storybook 용 상용구 파일을 설치하십시오. (다운로드하는 데 1 초가 걸립니다. 그 동안 신선한 커피를 마시고 싶을 것입니다.)

cd my-project npx -p @storybook/cli sb init

이 도구는 package.json 파일을 체크 아웃하여 사용중인 프레임 워크 또는 라이브러리 (보기 계층)를 결정합니다.
자동 검색이 실패하거나 HTML 용 Storybook을 사용하려면 다음 명령을 사용하십시오.

px -p @storybook/cli sb init --type html | <other-type>

2. install 이 끝나면 아래 커맨드로 스토리북을 실행하세요.

npm run storybook

실행되면 localhost 에 이런 창이 뜰 것 입니다.

3. 이제 스토리 북을 프로젝트 내 개발 의존성으로 추가하려고합니다. 다음 명령을 실행하여 이를 수행 할 수 있습니다.

npm install @ storybook / react --save-dev

4. 스토리 북에는 몇 가지 종속성이 있으며 설치해야합니다. react 및 react-dom 일반 의존성으로 저장해야합니다. @babel/core및 babel-loader개발 종속성으로 저장해야합니다.

npm install react-dom --save
npm install babel-loader @ babel / core --save-dev

5. npm스토리 북을 쉽게 시작할 수 있도록 스크립트를 추가하고 싶습니다. package.json파일 안에 storybook스크립트를 추가하겠습니다.

{
"script": {
"storybook": "start-storybook"
}
}

6. 마지막으로, 스토리 북 구성 파일을 작성하여 스토리 북에 스토리를 작성할 위치를 알려줍니다.

이전 단계에서 이 파일을 이미 작성했을 가능성이 높지만 그렇지 않은 경우 폴더 config.js내에 새 파일을 작성하십시오 storybook/.
내 config.js파일에는 다음이 포함되어 있습니다.

이것은 스토리 북이 src 폴더 내부에서 src/stories 이처럼 보도록 지시 합니다.

문서화

1. 개발 서버가 npm run storybook 으로 실행 중인지 확인하십시오.
2. 먼저의 내부에서 상용구를 제거합니다. src/stories/index.js.
3. 이제 첫 번째 컴포넌트를 가져 오겠습니다. 내 프로젝트의 경우 Button 구성 요소를 가져옵니다. src/폴더 안에 있습니다.

import Button from '../Button';

버튼 유형을 설명하기 위해 열거 형을 사용하고 있으므로 버튼을 가져올 것입니다.

import { ButtonTypes } from "../buttonTypes";

4. 우리는 이제 우리의 첫 번째 storiesOf 버튼을 쓰고 싶습니다. 1 차, 2 차 및 3 차의 세 가지 상태로 시작하겠습니다.

각 상태를 추가 하려면 .add()함수를 사용해야 합니다.
여기에는 추가하려는 state 이름과 컴포넌트를 반환하는 함수라는 두 가지 인수가 사용됩니다.

UI에서이를 확인하면 1 차, 2 차 및 3 차의 3가지 상태가있는 Button이라는 스토리가 표시됩니다.

5. 이제는 효과가 있으므로 스토리를 조금 더 잘 모듈화하고 싶습니다. 엔터프라이즈 응용 프로그램이나 전체 디자인 시스템에서이 작업을 수행 한 경우 컴포넌트 옆에 스토리를 추가합니다. 그러나 이것이 개념 증명이라는 사실 때문에 stories/폴더 안에 추가 할 것 입니다.

src/stories/안에 buttonStories.js파일을 만들겠습니다 .
다음으로 index.js파일 의 모든 코드를 복사 하여 새 파일에 붙여 넣습니다 .
마지막으로 buttonStories.js 파일을 index.js 에서 가져 오기 위해 업데이트 하겠습니다.

import "./buttonStories";

이게 다에요! 이제 당신은 컴포넌트와 스테이트로 스토리를 만들어 문서화 할 수 있습니다.