[개발일지 38일차] Storybook

MSJ·2022년 6월 27일
0

WEB

목록 보기
38/41
post-thumbnail

2022-06-27

리액트 실습 5 : 숫자 증가, 감소하는 버튼만들기

  • 기존의 함수 작성 방식
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>
  );
}

실행을 시켜보면 버튼이 제대로 동작하지 않는다. 이 코드는 리액트와 js의 차이점을 알려주기 위함이다.


  • 리액트에서는 이런 증가하는 함수들을 관리하는 유용한 도구들이 있다. 즉 State를 사용하는데,
    import{useState} from "react"; 로 불러온다.

  • const [counter, setCounter] = useState(0);
    setCounter은 값을 저장할 변수, counter는 함수

  • 감소하는 함수는 새로운 함수이므로 아래를 추가작성한다.

  const decrease =()=>{
    setCounter(counter - 1);
  }
import Box1 from './component/Box1';
import {useState} from "react";

function App() {
    //let counter = 0; //기존 방법으로 값을 변경했을 때 실행이 안되는 것을 확인

  const [counter, setCounter] = useState(0);
  const increase =()=>{
    setCounter(counter + 1);
     
     //counter = counter + 1; //기존 방법으로 값을 변경했을 때 실행이 안되는 것을 확인
  }
  
  
  const decrease =()=>{
    setCounter(counter - 1);
  }

  return (
      <div>
        <Box1 name="한국"/>
        <Box1 name="미국"/>
        <Box1 name="중국"/>

        <div>{counter}</div>
        <button onClick={increase}>증가!</button>
        <button onClick={decrease}>감소!</button>
      </div>
  );
}

Storybook 이용하기

Storybook?

컴포넌트 단위의 UI 개발 도구이다.

실제 웹 어플리케이션 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능하다.

데모용 코드를 작성하는 데 도음을 주고 공통적으로 사용될 컴포넌트를 팀원들과 편리하게 공유하는 도구로 활용된다.

장점

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

스토리북 실습

1) npx create-react-app proj3(프로젝트이름) 으로 새 프로젝트 디렉터리를 만든다

2) cd proj3 로 실행할 해당 디렉터리에 접근한다

3) npx -p storybook sb init 스토리북을 설치

4) npm run storybook 실행

실습 6 : text 컴포넌트 작성 및 story 연결

1) proj3->src 폴더 안에 component라는 새 폴더를 만든다

2) component 폴더에 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,
};

3) component 폴더에 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>;

실습 7 : Input 컴포넌트 작성 및 story 연결

1) 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="이름 : "/>;

어려운 점

Webpack에서 꼬였는지, 어디에서 꼬였는지 터미널에서 npm run storybook을 입력해도 실행이 안된다

해결 방법

node.js까지 삭제하고 다시 다운 받을 예정

+++

전부 삭제하고 다른 드라이브 옮겨서 처음 nvm 설치부터 해보아도 해결이 안 된다.

소감

프로그램 구동시키는 환경을 이해하는 것도 필요할 것 같다. 그냥 따라가서 깔기만 하면 왜 이렇게 됐는지 이해하기 어렵다.

profile
제로부터 시작하는 프로그래밍&코딩

0개의 댓글