🔍 useCallback

useMemo와 마찬가지로 메모제이션 기법을 이용한 Hook으로, 함수의 재사용을 위해 사용하는 Hook이다.

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

위의 예시는 useCallback 사용의 기본 구조로, 두 번째 인자인 의존성이 변경되었을 때만 다시 메모제이션된 버전이 변경된다.

import React, { useCallback } from "react";

function Calculator({x, y}){

	const add = useCallback(() => x + y, [x, y]);

	return 
  <>
      <div>
      	{add()}
      </div>
  </>;
}

위의 예시는 props로 받은 x, y값을 add 함수에 인자로 넘겨서 값을 더하여<div> 태그에 더한 값을 출력하고 있는 코드이다.

만약 x, y값이 지속적으로 바뀌지 않는다고 가정했을 때, useCallback Hook을 사용한다면 기존 함수를 계속해서 반환하며, 다음 렌더링 때 기존 함수를 다시 사용한다.

👀 참조 동등성에 의존하는 useCallback

React는 기본적으로 JavaScript의 문법을 따라가며, JavaScript에서 함수는 객체이다.

객체는 메모리에 저장할 때, 값이 아닌 주소를 저장하기 때문에 반환 값이 같더라도 메모리 주소 값이 다르기 때문에 같다고 볼 수 없다.
따라서, 새로 만들어 호출된 함수는 기존의 함수와 같은 함수가 아니다.

그러나 useCallback 을 이용해 함수 자체를 저장해서 재사용 시, 메모리 주소 값을 저장했다가 재사용하는 것과 같다고 볼 수 있기 때문에 다음과 같은 목적으로 유용하게 쓸 수 있다.

단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해 사용하는 것이 아니라,

• React 컴포넌트 함수 내에서 다른 함수의 인자로 함수를 넘길때

• 자식 컴포넌트의 prop으로 함수를 전달해줄때

재실행이 일어나는 횟수가 줄어들기 때문에 예상치 못한 성능 문제를 방지할 수 있다.

🔥 실습 예시

// App.js

import { useState, useCallback } from "react";
import "./styles.css";
import List from "./List";

export default function App() {
  const [input, setInput] = useState(1);
  const [light, setLight] = useState(true);

  const theme = {
    backgroundColor: light ? "White" : "grey",
    color: light ? "grey" : "white"
  };

  // useCallback 사용
  const getItems = useCallback(() => {
    return [input + 10, input + 100];
  },[input]);

  // 최적화 전
  // const getItems = () => {
  //   return [input + 10, input + 100];
  // };

  const handleChange = (event) => {
    if (Number(event.target.value)) {
      setInput(Number(event.target.value));
    }
  };

  return (
    <>
      <div style={theme} className="wall-paper">
        <input
          type="number"
          className="input"
          value={input}
          onChange={handleChange}
        />
        <button
          className={(light ? "light" : "dark") + " button"}
          onClick={() => setLight((prevLight) => !prevLight)}
        >
          {light ? "dark mode" : "light mode"}
        </button>
        <List getItems={getItems} />
      </div>
    </>
  );
}

// List.js

import { useState, useEffect } from "react";

function List({ getItems }) {
  /* Initial state of the items */
  const [items, setItems] = useState([]);

  /* This hook sets the value of items if 
     getItems object changes */
  useEffect(() => {
    console.log("아이템을 가져옵니다.");
    setItems(getItems());
  }, [getItems]);

  /* Maps the items to a list */
  return (
    <div>
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

export default List;

CSS 코드 생략

🔥 useMemo와 useCallback의 차이

분류	useCallback	useMemo
사용 목적	값의 재사용	함수의 재사용
함수의 호출을 막는가?	X	O
최적화 체감 정도	작음	큼

// useMemo 사용 방법
const memoizedValue = useMemo(
() => computeExpensiveValue(a, b), [a, b]);

// useCallback 사용 방법
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback(fn, deps) 은 useMemo(() => fn, deps)와 같다.

Reference:

코드스테이츠

https://ko.reactjs.org/docs/hooks-reference.html#usecallback