useCallback과 useMemo 사용하기

useCallback

useCallback은 자주 볼 수 있는 hook인데, 사용처와 방법에 대해서 확실히 정리하기 위해서 글을 남기기로 하였다.

랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다.

useCallback은 콜백 함수를 memoization(메모제이션)하고, 의존성이 변경되었을 때만 메모제이션된 함수의 버전이 변경된다.

useCallback의 첫 번째 인자로 함수가 들어가고, 두 번째 인자로 deps(의존성)이 들어간다.

useCallback에서 반환된 콜백 함수를 변수에 담아 사용한다.

deps에는 함수에 사용된 상태나 props가 모두 deps 배열에 포함되어야 한다.

🍉 useCallback 두 번째 인자인 배열(deps)에는 useEffect처럼, 모든 props와 상태가 들어가야 한다.

• useCallback은 다음과 같이 사용할 수 있다.

// useCallback 적용
import React, { useState, useCallback } from "react";

export default function App() {
  const [number, setNumber] = useState(1);

  const handleIncrease = useCallback(() => {
    console.log(number);
    setNumber((prev) => prev + 1);
  }, [number]); // 의존성 배열의 값이 바뀔 때만 반환값, 이 함수의 메모제이션이 다시 일어난다.

  return (
    <div>
      <div>현재 숫자 : {number}</div>
      <button onClick={handleIncrease}>숫자 증가!</button>
    </div>
  );
}

useMemo

useMemo역시 useCallback처럼 인자로 함수와 의존성 배열을 입력받는다.
🥞 useCallback(fn, deps)은 useMemo(() => fn, deps)와 같다.

useMemo와 useCallback의 차이는 useMemo가 함수를 실행한 뒤 메모제이션된 값/함수를 반환하는 반면, useCallback는 단순히 메모제이션된 함수를 반환한다는 점이다.

// useMemo 적용
import React, { useState, useMemo } from "react";

export default function App() {
  const [number, setNumber] = useState(1);

  const fn = (n) => {
    console.log(n);
    return n + " 현재 숫자 입니다.";
  };

  const data = useMemo(() => fn(number), [number]); 
  // 랜더링시 number값이 변경되면 함수가 실행된다.
  console.log(data); // useMemo를 통해 실행된 함수의 리턴 값을 출력한다.
  return (
    <div>
      <div>현재 숫자 : {number}</div>
      <button onClick={() => setNumber((prev) => prev + 1)}>숫자 증가!</button>
    </div>
  );
}

혹은

import React, { useState, useMemo } from "react";

export default function App() {
  const [number, setNumber] = useState(1);


  const handleIncrease = useMemo(() => 
    () => {
      console.log(number);
      setNumber(prev => prev + 1)
    }, [number]); // 함수 실행 결과로 함수가 반환되고, 이 반환된 함수는 버튼 클릭 시 실행된다.

  return (
    <div>
      <div>현재 숫자 : {number}</div>
      <button onClick={handleIncrease}>숫자 증가!</button>
    </div>
  );
}

 

🍙 참조한 공식 문서 : https://ko.reactjs.org/docs/hooks-reference.html#usecallback

Hooks API Reference – React