useCallback

useCallback

1. useCallback

 - React의 Hook

 - 함수 컴포넌트 내에서 함수를 Memoization하고 재사용하기 위해 사용되는 도구

 - 불필요한 함수 재생성을 방지하고 성능을 최적화할 수 있음

 - 일반적으로 React 컴포넌트 내에서 함수 정의 시, 컴포넌트 리렌더링될 때마다 새로운 함수 인스턴스가 생성

    → 이는 성능 저하를 초래하여, 이 문제를 해결하기 위해 useCallback을 사용

    → 함수를 캐싱하고 이전에 생성된 함수 인스턴스를 재사용함

 

2. 예시

 - App.js

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

import "./App.css";

let SubCallCount = 0;

function Sub({ no1, no2, calculateFunc }) {
  SubCallCount++;
  console.log(`SubCallCount : ${SubCallCount}`);

  return (
    <>
      <div style={{ border: "10px solid red", padding: 10 }}>
        입력 : {no1}, {no2}
        <br />
        결과 : {calculateFunc(no1, no2)}
      </div>
    </>
  );
}

let AppCallCount = 0;

const MemoisedSub = React.memo(Sub);

function App() {
  AppCallCount++;
  console.log(`AppCallCount : ${AppCallCount}`);

  const [no1, setNo1] = useState(0);
  const [no2, setNo2] = useState(0);
  
  const calculateFunc = useCallback((a, b) => a + b + no1, [no1]);

  return (
    <>
      <div>안녕하세요</div>
      <button onClick={() => setNo1(no1 + 1)}>버튼1 : {no1}</button>
      <hr />
      <button onClick={() => setNo2(no2 + 1)}>버튼2 : {no2}</button>
      <hr />
      <MemoisedSub no1={10} no2={20} calculateFunc={calculateFunc} />
    </>
  );
}

export default App;

 

 - 결과

    - useCallback을 사용하여 버튼1 클릭 시에만 Sub 함수가 실행되어 SubCallCount가 카운팅됨