useCallback()

useMemo와 같이 memoization 기능을 활용하는 Hook이다. useCallback의 경우에는 자주 쓰이는 함수를 캐싱하여 메모리에 저장해 필요한 경우에 다시 불러와서 사용하는 것이다.

useCallback() 기본구성

const calculate = useCallback((n)=> {
  return n + 1;

}, [item])

useMemo와 같은 방식이지만 useCallback은 콜백 함수 그 자체를 Memoization 을 하는 것에 차이가 있다. 값을 저장하는 것이 아닌 함수 자체를 저장하여 매번 함수를 새로 생성하는 것이 아닌 메모리에서 가져와서 재사용하는 것이다. 의존성 배열안의 item 변수는 item의 값이 변경될 때 마다 calculate 함수는 초기화된다.

예제 코드

// App.js
import React, { useState } from "react";
import Box from "./Box";

function App() {
  const [size, setSize] = useState(100);
  const [isDark, setIsDark] = useState(false);

  const createBoxStyle = () => {
    return {
      backgroundColor: "pink",
      width: `${size}px`,
      height: `${size}px`,
    };
  };
  return (
    <>
      <div style={{ background: isDark ? "black" : "white" }}>
        <input
          type="number"
          value={size}
          onChange={(e) => setSize(e.target.value)}
        />
        <button onClick={() => setIsDark(!isDark)}>Change Darkmode</button>
        <Box createBoxStyle={createBoxStyle} />
      </div>
    </>
  );
}

export default App;

// Box.js
import React, { useEffect, useState } from "react";

const Box = ({ createBoxStyle }) => {
  const [style, setStyle] = useState({});

  useEffect(() => {
    console.log("박스 사이즈 변경");
    setStyle(createBoxStyle());
  }, [createBoxStyle]);

  return <div style={style}></div>;
};

export default Box;

위의 코드를 본다면 박스의 크기가 바뀔때마다 Box.js 안의 useEffect가 호출되어 console에 박스 사이즈 변경 이 뜰 것이다. 하지만 App.js 의 Change Darkmode 버튼을 누르게 된다면 똑같이 console 에도 박스 사이즈 변경 이 뜰 것이다.

왜냐하면 isDark의 값이 변경되어 App 컴포넌트 자체가 새로 렌더링이 일어나고 다시 함수가 매번 새롭게 호출되어 새로운 메모리 주소를 가르키기 때문에 useEffect 자체에서는 변경되었다고 인식하여 작동하게 되는 것이다. 이러한 문제를 해결하기 위해 useCallback() 을 사용해 해결해 보자.

 const createBoxStyle = useCallback(() => {
    return {
      backgroundColor: "pink",
      width: `${size}px`,
      height: `${size}px`,
    };
  }, [size]);

이렇게 useCallback 안에 감싸서 함수 자체를 Memoization 하고 의존성 배열 안에는 size를 넣어서 size의 값이 변경될 때만 호출되도록 변경하였다.

이렇게 한다면 Change Darkmode 를 누르더라도 console 창에 아무것도 뜨지 않게 되는 것이다.