[React] 똑똑하게 useCallback 사용하기

이 글은 When to useCallback & useMemo hooks ? 의 번역글입니다. (이미지 포함)

개발자의 숙명, 어플리케이션 성능 최적화

성능 최적화는 개발자라면 누구든 어플리케이션 빌드 이후 마주하게 되는 흔한 이슈이다. 하지만 개발할 때는 완벽하게 동작했던 시스템이 배포 후 운영 시에 더 느려지는 느낌이 드는 건 단순한 착각일까?

개발 모드일 때 더 빠르게 느껴지는 이유

어플리케이션이 개발 모드일 때는 모든 파일들이 로컬 머신 즉, 내 컴퓨터를 통해 로컬 포트 3000번(React 기준)에 호스팅이 된다. 로컬에서 개발을 하기 때문에 인터넷 속도에 그다지 영향을 받지 않는 경우, 번들 파일들을 다운로드 받는 것은 굉장히 효율적이며 빠르게 동작한다. 하지만 운영 시에는 인터넷이 굉장히 느린 곳을 위한 어플리케이션을 빌드하는 경우 인터넷 속도가 큰 이슈를 발생할 수 있는 것이다.

필요하지 않다면 차라리 하지 않는 것이 낫다

성능 최적화에는 항상 비용이 들지만 그렇다고 해서 항상 이점이 있는 것도 아니다.

때문에 필요하지도 않으면서 사전에 미리 최적화 코드를 작성하지 말자. 그리고 타당한 이유 없이 구글링을 하며 알게 된 성능 최적화 팁들에 넘어가지 말자. 정말로 어플리케이션이 운영되고 있고, 그 중에서도 정말로 느리다고 생각되는 부분의 코드만 최적화를 하자. 필요가 없음에도 어디서 주워들은 지식들을 시스템에 적용하는 것을 지양해야 한다.

코드를 최적화 한다는 것은 모든 코드 라인에 비용이 수반되는 것을 의미하므로 최적화는 오히려 코드를 느려지게 할 수 있다. 따라서 과한 성능 최적화를 해서는 안된다. 코드를 측정하고 정말로 느린지 확인 후 최적화를 시작해야 한다. 어플리케이션이 느려지기 시작하고, 문제가 있다는 걸 알아차렸을 때만 성능 최적화를 하는데 이 때, 먼저 해결책을 찾기 보다는 왜 느려지고 있는지 원인을 찾아야 한다.

useCallback을 잘 사용하는 방법

useCallback은 함수를 기억했다가 재사용하도록(메모이제이션) 도와주는 훅이다.

리액트에서는 부모 컴포넌트가 리렌더되면 그 안의 자식 컴포넌트도 리렌더가 된다. 그리고 이렇게 리렌더링 될 때마다 자식 컴포넌트는 매번 내부 동작들을 다시 실행하게 된다. 이 때 useCallback을 사용해서 함수의 불필요한 재실행 이슈를 해결할 수 있다.

먼저 useCallback을 적용하지 않은 예제이다.

import React, { useState } from "react";

const set = new Set();

export default function App() {
  const [count, setCount] = useState(0);

  const increase = () => setCount(count + 1);
  const printLog = () => console.log("re-execute"); 

  set.add(printLog);
  console.log(set); 

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={increase}>Add</button>
      <button onClick={printLog}>Print</button>
    </div>
  );
}

Add 버튼을 클릭해 count가 증가하면 App 컴포넌트가 리렌더 되면서 내부의 increase 함수와 printLog 함수의 선언과 호출도 반복해서 실행된다. 따라서 Add 버튼을 3번 클릭해서 count가 0에서 2로 증가했을 때 로그를 확인해보면 아래와 같다. 버튼을 한 번 클릭할 때마다 printLog 함수가 새롭게 선언되어서 Set에 더해지고 있다. (StrictMode로 인해 두 번씩 실행되고 있는 건 무시 바람)

increase 함수는 변경되는 state인 count를 참조하고 있기 때문에 값이 증가하면 함께 재생성 되어서 실행되어야 하는 함수가 맞다. 하지만 printLog 함수의 경우 첫 실행 이후 내부적으로 동작이 변경되지 않기 때문에 매번 새롭게 생성할 필요가 없다. 바로 이럴 때 useCallback을 사용해 최적화를 해주는 것이다!

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

const set = new Set();

export default function App() {
  const [count, setCount] = useState(0);

  const increase = () => setCount(count + 1);
  const printLog = useCallback(() => console.log('re-execute'), []); // 1️⃣

  set.add(printLog); // 2️⃣
  console.log(set); 

  return (
    <div className="App">
      <p>{count}</p>
      <button onClick={increase}>Add</button>
      <button onClick={printLog}>Print</button>
    </div>
  );
}

그럼 이제 count가 증가해도 ️1️⃣에서는 printLog 함수가 재선언 되지 않고 처음 생성됐던 함수를 재사용하게 된다. 따라서 중복된 값을 허용하지 않는 Set의 자료구조 특성상, 리렌더 될 때마다 2️⃣에서 printLog 함수를 set에 더해도 함수의 참조값이 처음과 같기 때문에 중복되어 더해지지 않는다.

콘솔을 확인해보면 명확해진다. App 컴포넌트가 최초 마운트 될 때 함수가 생성되어 더해진 뒤, 그 이후부터는 함수를 재사용하고 있음을 확인할 수 있다.

테스트 해보기!