[React] Hooks

rang·2022년 8월 2일

React hook

React

목록 보기

3/5

Hook

함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
클래스형 컴포넌트에서만 가능하던 상태관리를 함수형 컴포넌트에서도 쉽게 제어할 수 있게 한다.

Hook 특징

계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다.
기존의 코드를 다시 작성할 필요 없이 일부 컴포넌트 안에서 사용 가능하다.
이전 버전과 호환성을 깨트리는 변화가 없다.

Hook 사용규칙

최상위에서만 Hook 호출 가능하다.
→ 반복문, 조건문, 중첩된 함수 내에서 실행 불가능하다.
React 함수 컴포넌트 내에서만 호출 가능하다
→ JS 함수에서 호출 X
Hook을 만들 때 앞에 use를 붙여야한다.
→ Hook 규칙이 적용되면 구별하기가 쉽다.

Hook 종류

useState

state를 함수형 컴포넌트에서 사용하게 해주는 Hook

this.state, this.setState를 대체한다.
배열을 반환하고 구조 분해 문법으로 꺼내놓은 모습이다.
만약 state가 객체 데이터 타입인 경우 불변성을 유지해줘야 한다.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

일반 업데이트 & 함수형 업데이트
- 일반 업데이트 방식 : setState가 각각 실행되는 것이 아니라 배치(batch)로 처리한다. 그래서 하나의 이벤트 리스너에 여러 명령이 있으면 그 명령을 모아 최종적으로 한 번만 실행한다.
- 함수형 업데이트 방식 : 하나의 이벤트 리스너에 여러 명령이 있으면 그 명령을 모아 순차적으로 각각 1번씩 실행한다.

setCount(count + 1);					// 일반형 업데이트

setCount(() => { return count + 1 });	// 함수형 업데이트

useEffect

side effect(화면이 랜더링된 후 비동기로 처리되어야하는 부수적인 효과)를 처리하는 Hook

componentDidMount(), componentDidUpdate(), componentWillUnmount()를 대체한다.
컴포넌트가 화면에 렌더링될 때 useEffect가 실행된다.
useEffect가 여러개라면 위에서부터 실행된다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

의존성 배열
useEffect 두번째 매개변수 배열에 값을 넣으면 그 값이 변경될 때만 useEffect를 실행한다.

의존성 배열에 값이 없을 때(빈 배열일 때)
배열에 값이 없기 때문에 처음에 딱 한번만 실행되고 그 이후로는 실행이 안된다.

useEffect(() => {
    document.title = `You clicked ${count} times`;
}, []);

의존성 배열에 값이 있을 때
최초 렌더링 이후 count가 변경될 때마다 useEffect가 실행된다.

useEffect(() => {
    document.title = `You clicked ${count} times`;
}, [count]);

Clean Up
컴포넌트가 사라졌을 때 실행하는 과정이다.
메모리 누수가 발생하지 않도록 정리(clean up)하는 것이 중요하다.

useEffect(() => {
    document.title = `You clicked ${count} times`;
  
  // clean up code
  return () => {
  	console.log("clean up", document.title);
  };
}, []);

useRef

React에서 DOM을 직접 컨트롤할 때 사용하는 Hook

React.createRef를 대체한다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  
  const onButtonClick = () => {
    inputEl.current.focus();
  };
  
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}