[ React ] useCallback에 대해 알아보자.

참고 사이트

• 리액트 공식 문서 - useCallback

• 별코딩님의 youtube - useCallback 강의

 

 

🪣 useCallback

useCallback은 재렌더링 사이에 함수 정의를 캐시할 수 있는 React Hook이다.

 

📢 참조

useCallback 재렌더링 사이에 함수 정의를 캐시하려면 구성 요소의 최상위 수준에서 호출하면 된다.

const cachedFn = useCallback(fn, [dependencies]);

 

 

📦 Parameters

• fn: 캐시하려는 함수이다. 모든 인수를 취하고 모든 값을 반환할 수 있다.

React는 초기 렌더링 중에 함수를 다시 반환한다(호출X). 다음 렌더링에서 dependencies가 변경되지 않은 경우 동일한 기능을 다시 제공하며, 그렇지 않다면 이전 렌더링에 전달한 함수를 제공하고 다시 사용할 수 있도록 저장한다.

 

• dependencies: fn 코드 내부에서 참조되는 모든 반응 값의 목록이다. props, state및 구성 요소 본체 내부에 직접 선언된 모든 변수와 함수가 들어갈 수 있다.

 

🎁 Return

useCallback() Hook은 초기 렌더링 시, 전달한 함수 fn를 반환한다.

종속성이 변경된 경우 렌더링 중에 전달된 함수를 반환하고, 그렇지 않다면 마지막 렌더링에서  저장된 함수를 반환한다.

 

⚠️ 주의사항

• useCallback은 Hook이므로 컴포넌트 최상위 수준 또는 자체 Hook에서만 호출이 가능하다.

• React는 특별한 이유가 없는 한 캐시된 함수를 버리지 않습니다.

 

✒️ 사용

• 구성 요소 다시 렌더링 건너뛰기

 

렌더링 성능을 최적화할 때 하위 구성 요소에 전달하는 기능을 캐시해야하는 경우가 있다.

 

 📄App.tsx

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

function App() {
  const [size, setSize] = useState<number>(50);
  const [isDark, setIsDark] = useState(false);

// const createBoxStyle = () => {
//   return {
//     backgroundColor: "skyblue",
//     width: `${size}px`,
//     height: `${size}px`,
//   };
// };

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

export default App;

라인 12. useCallback을 사용하지 않고 렌더링 시 계속 함수를 호출하게 된다.

"Change Theme"버튼을 통해 isDark의 값을 바꾸어도 불필요하게 호출되는데 이때, useCallback을 통해 size값이 변경 될 때만 함수가 호출되도록 한다면 성능 저하를 조금이라도 방지할 수 있다.

 

<Box/> 태그의 코드는 아래와 같다.

 

📄 Box.tsx

import { useEffect, useState } from "react";

type boxStyle = {
  backgroundColor: string;
  width: number;
  height: number;
};

export const Box = ({ createBoxStyle }: any) => {
  const [style, setStyle] = useState<boxStyle>();

  useEffect(() => {
    console.log("박스 키우기");
    setStyle(createBoxStyle());
  }, [createBoxStyle]);

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

createBoxStyle을 가져와서 바뀔 때마다 log를 찍고, State가 변경되었으므로 해당 Box의 크기를 변경한다.

 

 

useCallback()이 적용된 함수와 그렇지 않은 함수를 적용해가며 log를 확인해보자.