useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용합니다.

 

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면,

useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

 

함수 메모이제이션

useCallback 은 함수를 memoization 하기 위해서 사용되는 Hooks 함수 입니다.

첫번째로 인자로 넘어온 함수를, 두번째 인자로 배열을 받습니다.

이 배열은 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.

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

 

예를 들어, 어떤 React Component 안에 함수가 선언이 되어 있다면 이 함수는 해당 Component 가 리렌더링 될 때마다 새로운 함수를 생성하게 됩니다. 이 부분은 리액트의 불변성 때문입니다.

이유가 궁금하시면 useMemo 부분에 정리하였기 때문에 참고하시길 바랍니다.

 

사실 컴포넌트가 랜더링될 때마다 함수를 새로 선언하는 것은 자바스크립트가 브라우저에서 얼마나 빨리 실행되는지를 생각해보면 성능 상 큰 문제가 되지 않습니다. 따라서 단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기 위해서  useCallback()을 사용하는 것은 큰 의미가 없거나 오히려 손해인 경우도 있습니다.

 

그럼 도대체 useCallback 함수는 어떤 경우에 의미있는 성능 향상을 기대할 수 있을까요??

 

자바 스크립트 함수 동등성

useCallback 함수를 언제 사용해야 하는지 이해하려면 자바스크립트에서 함수 간의 동등함이 어떻게 결정되는지 알 필요가 있습니다.

다음과 같이 동일한 코드의 자바스크립트 함수가 동일한 === 연산자를 통해 비교를 해보면 false 가 반환 될 것입니다.

> const add1 = () => x + y;
undefined
> const add2 = () => x + y;
undefined
> add1 === add2
false

 

함수도 객체로 취급이 되기 때문에 메모리 주소에 의한 참조 비교가 일어나기 때문입니다. 

 

이러한 자바스크립트 특성은 React Component 함수 내에서 어떤 함수를 다른 함수의 인자로 넘기거나 자식 컴포넌트의 prop 으로 넘길 때 예상치 못한 성능 문제로 이어질 수 있습니다. 즉 해당 함수 때문에 불필요한 자식 컴포넌트의 리렌더링이나, 다른 함수의 참조값 변경이 일어날 수 있습니다. 

 

의존 배열로 함수를 넘길 때

많은 React hook 함수들이 불필요한 작업을 줄이기 위해서 두 번째 인자로, 첫 번째 함수가 의존해야하는 배열을 받습니다.

예를 들어, useEffect 함수는 두번째 인자로 넘어온 배열이 변경될 때만 첫 번째 인자로 넘어온 함수를 호출합니다.

 

다음과 같이 컴포넌트에서 API 를 호출하는 코드는 fetchUser 함수가 변경될 때만 호출됩니다.

여기서 위에서 설명드린 자바스크립트가 함수의 동등성을 판단하는 방식 때문에 예상치 못한 무한 루프가 발생하게 됩니다.

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

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = () =>
    fetch(`https://your-api.com/users/${userId}`)
      .then((response) => response.json())
      .then(({ user }) => user);

  useEffect(() => {
    fetchUser().then((user) => setUser(user));
  }, [fetchUser]);

  // ...
}

 

fetchUser 을 useEffect 의 의존배열에 넣습니다. 이렇게 되면 fetchUser은 리렌더링 될때마다 참조값이 바뀌기 때문에 useEffect 함수가 호출되고 user 상태값이 바뀌고 그러면 다시 리렌더링 되고 그럼 또 다시 useEffect 함수가 호출되는 악순환이 반복됩니다.

 

이와 같은 상황에서 useCallback 함수를 이용하면 Component 가 다시 렌더링되더라도 fetchUser 함수의 참조값을 동일하게 유지시킬 수 있습니다. 따라서  useEffect()에 넘어온 함수는 userId 값이 변경되지 않는 한 재호출 되지 않게 됩니다.

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

function Profile({ userId }) {
  const [user, setUser] = useState(null);

  const fetchUser = useCallback( () => {
    fetch(`https://your-api.com/users/${userId}`)
      .then((response) => response.json())
      .then(({ user }) => user);)
  }, [userId])
   
   .... 생략

 

 

React.memo 와 함께 사용하기

useCallback 함수는 자식 컴포넌트의 렌더링의 불필요한 렌더링을 줄이기 위해서 React.memo 함수와도 사용할 수 있습니다.

만약 React.memo 함수를 모르신다면 공부하고 오시는 것을 추천 드립니다.

 

예를 들어, 방이름(room), 조명 켜짐 여부(on), 조명 제어 함수(toggle)를 prop으로 Light 컴포넌트를 작성해보겠습니다.

import React from "react";

function Light({ room, on, toggle }) {
  console.log({ room, on });
  return (
    <button onClick={toggle}>
      {room} {on ? "💡" : "⬛"}
    </button>
  );
}

그리고 React.memo() 함수로 이 컴포넌트를 감싸줍니다.
이렇게 React 컴포넌트 함수를 React.memo() 함수로 감싸주면
해당 컴포넌트 함수는 props 값이 변경되지 않는 한 다시 호출되지 않습니다.

 

export default React.memo(Light);

 

다음으로 3개의 방의 스위치를 중앙 제어해주는 SmartHome 컴포넌트를 작성합니다.

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

function SmartHome() {
  const [masterOn, setMasterOn] = useState(false);
  const [kitchenOn, setKitchenOn] = useState(false);
  const [bathOn, setBathOn] = useState(false);

  const toggleMaster = () => setMasterOn(!masterOn);
  const toggleKitchen = () => setKitchenOn(!kitchenOn);
  const toggleBath = () => setBathOn(!bathOn);

  return (
    <>
      <Light room="침실" on={masterOn} toggle={toggleMaster} />
      <Light room="주방" on={kitchenOn} toggle={toggleKitchen} />
      <Light room="욕실" on={bathOn} toggle={toggleBath} />
    </>
  );
}

 

이 컴포넌트를 이용해서 침실의 조명을 켜보면 침실 뿐만 아니라 다른 모든 방에 대한 Light 컴포넌트 함수가

호출이 되는 것이 콘솔 로그로 확인될 것입니다.

 

조명을 키거나 끄는 방에 대한 Light 컴포넌트 함수만 호출되게 하고 싶어서, React.memo()를 사용한 것인데 무엇이 문제일까요?
바로 조명을 제어할 때 쓰이는 toggleMaster(), toggleKitchen(), toggleBath() 함수의 참조값이 SmartHome 컴포넌트가 랜더링될 때마다 모두 바뀌어버리기 때문입니다.

 

이 문제를 해결하려면 모든 조명 제어 함수를 useCallback() hook 함수로 감싸고

두 번째 인자로 각 함수가 의존하고 있는 상태를 배열로 넘겨야 합니다.

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

export default function SmartHome() {
  const [masterOn, setMasterOn] = useState(false);
  const [kitchenOn, setKitchenOn] = useState(false);
  const [bathOn, setBathOn] = useState(false);

  const toggleMaster = useCallback(() => setMasterOn(!masterOn), [masterOn]);
  const toggleKitchen = useCallback(() => setKitchenOn(!kitchenOn),[kitchenOn]);
  const toggleBath = useCallback(() => setBathOn(!bathOn), [bathOn]);

  return (
    <>
      <Light room="침실" on={masterOn} toggle={toggleMaster} />
      <Light room="주방" on={kitchenOn} toggle={toggleKitchen} />
      <Light room="욕실" on={bathOn} toggle={toggleBath} />
    </>
  );
}

 

이제는 침실에 조명을 켜보면 침실에 대한 Light 컴포넌트 함수만 호출되는 것을 확인할 수 있습니다. 💡

결론

주변에 보면 React 컴포넌트 내에서 선언하는 모든 함수에 useCallback 함수를 무조건 적으로 사용하는 경우가 있는 것 같습니다.
일반적으로 소프트웨어의 성능 최적화에는 그에 상응하는 대가(코드가 복잡해지거나 유지보수가 어려워짐)가 따르기 마련입니다.
따라서, useCallback()를 사용하시기 전에 실질적으로 얻을 수 있는 성능 이점이 어느 정도인지 반드시 직접 측정을 해보시고

사용하시기를 권장드립니다.