[React] Storybook, useRef

목차

 

 

📌  Storybook, useRef

 

 

 

📍Strorybook이란?

 

UI개발 즉, Component Driven Development를 하기 위한 도구

개발 모드에서 앱과 함께 실행

스토리북은 비즈니스 로직과 맥락으로부터 분리된 UI 컴포넌트를 만들 수 있도록 한다

 

 

🤔 왜 사용하나요?

기본적으로 독립적인 개발 환경에서 실행

개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다

 

주요기능

 

• UI 컴포넌트들을 카탈로그화하기
• 컴포넌트 변화를 Stories로 저장하기
• 핫 모듈 재 로딩과 같은 개발 툴 경험을 제공하기
• 리액트를 포함한 다양한 뷰 레이어 지원하기

 

 

 

🔗 Storybook 설치

 

리액트 앱 설치 후

 

npx storybook init

 

storybook 실행

 

npm run storybook

//에러 날 시 추가로 설치 후 실행
npm i @testing-library/dom

 

 

 

 

📍useRef(reference)

저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook

React에서는 예외적인 상황에서 useRef으로 DOM노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다.

 

예외적인 상황

 

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

<가정>컴포넌트에 focus를 위치시킬 필요가 있는 경우

- 예를 들어 값을 여러개 입력하고 첫번째 칸으로 이동해야 하는 경우

 

import React, {useState, useRef } from 'react'; // useRef 함수를 불러오고

function InputTest() {
  const [text, setText] = useState('');
  const nameInput = useRef(); // Ref객체 선언

  const onChange = e => {
    setText(e.target.value)
  };

  const onReset = () => {
    setText('');
    nameInput.current.focus();
  };

  return (
    <div>
      <input
        name="name"
        onChange={onChange}
        value={text}
        ref={nameInput} // 선택하고 싶은 DOM에 속성으로 ref 값 설정
      />

      <button onClick={onReset}>초기화</button>
      <div>
        <b>내용: </b>
        {text}
      </div>
    </div>
  );
}

export default InputTest;