[React] 성능 최적화 useCallback에 대해서 알아보기

[React] 성능 최적화 useCallback에 대해서 알아보기

📖 들어가며

이전 글 React.memo 글에서 부모 컴포넌트에서 함수를 props로 받을 때 해결할 수 없는 문제를 해결할 수 있는 useCallback에 대해서 알아보겠습니다.

useCallback이란 ❓

먼저 React에서 useCallback은 리렌더링 사이에 함수 정의를 캐시 할 수 있게 해주는 React 훅입니다.

즉, useCallback 훅은 기본적으로 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 훅으로 React에 함수를 캐싱하고 매 실행마다 해당 함수를 재생성되는 상황을 막을 수 있습니다.

사용 방법

캐싱하려는 함수를 useCallback으로 래핑 하기만 하면 됩니다.

// Button.js

const Button = ({ onClick }) => {
  console.log('Button RUNNING');

  return <button onClick={onClick}>클릭</button>;
};

export default React.memo(Button);

// App.js
import React, { useState, useCallback } from 'react';

function App() {
  const [toggleState, setToggleState] = useState(false);
  console.log('APP RUNNING');

  const toggleStateHandler = useCallback(() => {
    setToggleState((prev) => !prev);
  }, []);

  return (
    <div className="app">
      <Button onClick={toggleStateHandler}>Toggle State</Button>
    </div>
  );
}

export default App;

함수를 첫 번째 인자로 전달하면 useCallback은 캐싱된 함수를 반환합니다.

그리고, 이 App 컴포넌트가 다시 실행되면 useCallback이 React에 캐시 된 함수를 찾아서 같은 함수 객체를 재사용합니다.

이렇게 하면 useCallback과 React.memo 덕분에 무분별한 리렌더링을 막을 수 있게 됩니다.

반응형

의존성 배열

useEffect와 마찬가지로, useCallback은 두 번째 인자가 필요합니다.

바로 useCallback 호출에 대한 의존성 배열입니다.

이 의존성 배열은 useEffect와 같은 것을 의미하고 함수를 감싼 컴포넌트로부터 전달받는 모든 것을 사용할 수 있습니다.

마찬가지로, 빈 배열을 넣게 되면 첫 호출 이후 재 호출 되지 않습니다.

사용하면 좋은 상황

• 함수 자체가 매우 복잡하거나, 계산에 대해서 비용이 많이 발생하는 경우
• 자식 컴포넌트에 함수를 props로 넘길 때, 불필요한 렌더링이 일어난다고 판단되는 경우

useCallback도 마찬가지로 사용에 따른 비용이 발생하기 때문에 상황에 맞지 않게 useCallback을 남발하는 것은 더 좋지 않은 성능을 보일 수 있습니다.