Hooks Additional API


React는 기본적인 Hook 이외에도 useReducer, useCallback, useMemo, useRef 등 여러가지 Hook 들이 있다.


useReducer

  • useState의 대체 함수입니다.
  • (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다.
  • 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 많이 사용 되어진다. 

const [state, dispatch] = useReducer(reducer, initialArg, init);



useCallback

  • 첫 번째 인자로는 콜백 함수, 두 번째 인자는 의존성 배열을 전달
  • 의존성 배열의 값이 하나라도 바뀔 경우 새로운 함수를 반환
  • 컴포넌트의 불필요한 렌더링을 방지하기 위해 사용

const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);



useMemo

  • 메모이제이션된 값을 반환한다.
  • 동일한 계산을 반복할 때 이전에 계산한 값을 기억해서 반복 계산을 제거
  • 첫 번째 인자로 실행될 함수를 전달한다.
  • 두 번째 인자로 의존성 배열을 전달한다.
  • 배열 요소 중 값이 하나라도 바뀌면 첫 번째 인자로 전달된 함수가 재계산된다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);



useRef

  • javascript의 document.getElementById()처럼 사용 할 수 있습니다.
  • DOM을 선택하는 용도 외에도 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 용도로도 사용됩니다.
  • useRef 로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링 되지 않습니다. 

import React, { useRef } from "react";

export default function example() {
  const nameInput = useRef();

  return <input name="name" value={text} ref={nameInput} />;
}