리액트 내장 훅의 종류 (React Hooks)

 

0. 오늘의 배울 것.

리액트 훅의 종류에 대해 알아보자.
사실 나는 강의에서 배운 useState, useEffect, useCallback, useMemo 정도만 알고 있었는데 생각보다 다양하더라.
여러 가지 알아보고 써먹어보자.
참고로 custom hook 말고 리액트에 내장된 훅만 써보았다. 커스텀 훅은 나중에!

1. 목차

useState
useEffect
useReducer
useImperativeHandle
useLayoutEffect

2. 훅의 종류

useState

값이 바뀔 때마다 화면을 리렌더링하게 하려면 값을 state로 만들어 관리해야 한다.

• useState의 인자: state의 초기값.
• useState가 리턴하는 값: state변수와 변수를 갱신하게 해주는 함수를 배열에 담아 반환함.

const [userName, setUserName] = useState("홍길동");

setUserName("새로운 이름");

useEffect

사이드 이펙트 (side effect)를 발생시키고 싶다면 useEffect를 쓰자. 리액트가 컴포넌트를 렌더링한 이후, 자동으로 수행되게 할 일을 useEffect 안에 넣으면 된다. useEffect는 렌더링 이후 매번 수행되는 훅이라서, dependency의 값에 따라 반복 실행된다. 만약 dependency에 값이 없다면 맨 처음 화면이 렌더링된 이후 딱 한 번만 useEffect 내부 콜백 함수를 실행한다.

• useEffect의 인자: 실행할 콜백 함수와 dependency 배열.
• useEffect가 리턴하는 값: clean up 함수.

// 컴포넌트가 렌더링될 때 그 시점에서 딱 한 번 실행됨.
useEffect(() =>{
    console.log("홍길동");
},[])

useReducer

state보다 복잡한 상태 로직을 처리해야 할 때 사용하는 훅.

import { useReducer } from 'react';

function reducer(state, action) {
  // 상태를 어떻게 업데이트할지 명시.
  // reducer 함수는 순수함수여야 하며, 인자로 상태와 액션을 받아 다음 상태값을 반환해야 함.
  return ...
}

function MyComponent() {
  // initialArg는 초기값. init는 초기값을 반환하는 초기화함수. 
  // init이 없다면 초기값은 initialArg가 되고, init이 있다면 초기값은 init(initialArg)이다.
  const [state, dispatch] = useReducer(reducer, initialArg, init?);
}

무엇을 써야 하는지 정답은 없지만, 그래도 객체나 배열 state를 관리할 때엔 reducer이 유용할 수 있다.

useImperativeHandle

자식 컴포넌트에서 노출하고 싶은 ref 객체를 정의할 때 쓴다. 자주 쓰이진 않는다.

useLayoutEffect

useEffect와 비슷하지만, useLayoutEffect는 렌더링 후 layout과 paint 전에 동기적으로 실행된다. 마찬가지로 자주 쓰이지 않는다. 왜냐하면 로직이 복잡할 경우 사용자가 레이아웃을 보는 데까지 시간이 오래 걸리는 단점이 있기 때문.

만약 화면 깜빡임 문제가 있다면, useLayoutEffect를 쓸 수는 있겠지만 middleware를 활용하거나 response interceptor을 활용하는 등의 방식도 있기 때문에 useLayoutEffect를 쓰지 않아도 되긴 한다.

3. 나머지 훅들.

자주 쓰이는 훅들이지만, 너무 글이 길어져서 일단 뺐다.

• useContext: 컨텍스트를 만들 때 쓰는 훅.
• useCallback: 함수를 재렌더링하지 않고 기억하는 훅
• useMemo: 값을 재렌더링하지 않고 기억하는 훅
• useRef: ref 객체를 관리할 때 쓰는 훅
• useDebugValue: 컴포넌트가 어떤 훅을 썼는지 알려주는 훅. 개발자 도구에서 확인할 수 있다.