[React] Storybook

XIXI·2022년 6월 27일

대구AI스쿨

목록 보기

43/57

🌱 React

✏️개념 장점

페이스 개발에 사용한 기술
공개 소프트웨어
화면 출력에 특화된 프레임워크
컴포넌트를 조립하여 화면 구성
게임 엔진 원리를 도입하여 화면 출력 속도가 빠름(Virtual Dom)

✏️버튼 클릭 시 숫자 증가하기

state 사용
특성: 비동기

function App() {
  let counter = 0;
  const increase = ()=>{
    counter = counter + 1;
  }
  return (
    <div>
      <Box1 name="한국"/>
      <Box1 name="미국"/>
      <Box1 name="중국"/>

      <div>{counter}</div>
      <button onClick={increase}>클릭!</button>
    </div>
  );
}

🌱 에어비앤비 디자인 시스템 따라하기

✏️개념

스토리북(StoryBook): UI 컴포넌트 개발 도구
데모용 코드를 작성하는데 도움을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편하게 공유하는 도구로 활용
구성 단위는 스토리
하나의 UI 컴포넌트는 보통 하나 이상 Story를 가짐

✏️장점

복잡한 로직 없이 독립적인 환경에서 컴포넌트 개발 가능
재사용을 위한 컴포넌트들을 story에서 조합해 테스트할 수 있음
컴포넌트들을 문서화 할 수도 있고 디자인 시스템에 적용해 피그마의 컴포넌트들과 동기화할 수 있음

✏️실습 이론

• npx create-react-app 프로젝트 디렉터리
• cd 프로젝트 디렉터리
• npx –p storybook sb init
• npm run storybook

폴더구조

• main.js : stories를 위한 config 설정
• preview.js : 모든 story들에 글로벌하게 적용될 포맷 세팅

스토리 기본구조

Export default {
  Title : 스토리북에 올릴 component 폴더 계층 구조,
  Component : 스토리를 만들 컴포넌트 이름
}

Export const 스토리이름 = () => 해당스토리에서 테스트할 인자가 담긴 컴포넌트

✏️실습

componunt 폴더 생성
파일생성 Text.jsx

import React, { Component } from 'react'
import PropTypes from "prop-types" ;

export function Text({children, color, italic, underline}) {
  const style = {
    color : color,
    fontStyle : italic? "italic" : "normal",
    textDecoration : underline? "underline" : "none"
  };
  return <span style={style}>{children}</span>
};

Text.propTypes = {
  children: PropTypes.string.isRequired,
  color : PropTypes.string,
  italic : PropTypes.bool,
  underline : PropTypes.bool,
};

Text.defaultProps = {
  color : "black",
  italic : false,
  underline : false,
}

파일생성 Text.stories.js

import React, {Component} from "react";
import {Text} from "./Text";

export default {
  title : "Text",
  component : Text,
};

const TEST_TEXT = "Story Text Test";
export const Default = ()=><Text>{TEST_TEXT}</Text>;
export const Red = ()=><Text color="red">{TEST_TEXT}</Text>;
export const Italic = ()=><Text italic>{TEST_TEXT}</Text>;
export const Underline = ()=><Text underline>{TEST_TEXT}</Text>;

Storybook에서 확인할 수 있음

✏️실습2

component input.jsx 파일 생성

import React, { Component } from "react";
import PropTypes from "prop-types";

class Input extends Component {
  constructor(props) {
    super(props);
    this.setRef = this.setRef.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const { name, onChange } = this.props;
    if (onChange) {
      onChange(name, e.target.value);
    }
  }

  componentDidMount() {
    if (this.props.autoFocus) {
      this.ref.focus();
    }
  }

  componentDidUpdate() {
    if (this.props.autoFocus) {
      this.ref.focus();
    }
  }

  setRef(ref) {
    this.ref = ref;
  }

  render() {
    const { errorMessage, label, name, value, type, onFocus } = this.props;
    return (
      <label>
        {label}
        <input
          id={"input_${name}"}
          ref={this.setRef}
          onChange={this.handleChange}
          onFocus={onFocus}
          value={value}
          type={type}
        />
        {errorMessage && <span className="error">{errorMessage}</span>}
      </label>
    );
  }
}

Input.propTypes = {
  type: PropTypes.oneOf(["text", "number", "price"]),
  name: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  errorMessage: PropTypes.string,
  label: PropTypes.string,
  onChange: PropTypes.func,
  autoFocus: PropTypes.bool,
};

Input.defaultProps = {
  onChange: () => {},
  onFocus: () => {},
  autoFocus: false,
  type: "text",
};

export default Input;

component input.stories.js

import React, { Component } from 'react';
import Input from "./Input";

export default{
    title : "Input",
    component : Input,
};

export const label = ()=><Input name="name" label="이름 :"></Input>;