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