[React] useMemo, useCallback, 메모이제이션

🍀들어가며

이번 시간에는 컴포넌트 최적화를 위해 사용되는 대표적인 Hook에 대한 소개가 있겠습니다. 이 중에서 useMemo와 useCallback을 중점으로 다루어 보는 시간을 가지도록 하겠습니다.

🍀Memoization(메모이제이션)

useMemo에서 Momo는 Memoization을 의미하며, 동일한 값을 return하는 함수를 반복적으로 호출해야 된다면 맨 처음 값을 계산 할 때 해당 값을 메모리에 저장해서 필요할 때 마다(또 다시 계산하지 않고)메모리에서 꺼내서 재사용 하는 기법.

=> 즉, 이전에 계산한 값을 메모리에 저장하여 중복적인 계산을 제거하여 전체적인 실행속도를 빠르게 해주는 기법

🍀Memoization(메모이제이션) 예시

위의 사진과 같이 동일한 값을 return하는 함수(calculate함수)를 반복적으로 호출해야 된다면, 맨처음 값을 계산할 때 해당값을 메모리에 저장해서 필요할 때 마다 메모리에서 꺼내서 재사용한다.

🍀useMemo를 사용하는 이유

앞선 예시와 같이 간단한 일을 하는 함수가 아닌, 무거운 일을 하는 함수라고 한다면 컴포넌트가 렌더링이 될 때마다 반복적으로 호출되게 되면 매우 비효율적이고 성능에도 악영양을 끼칠것이다.
이를 useMemo를 활용하여 간단하게 해결이 가능하다.

🍀useMemo 예시 코드 및 영상

🌱 어려운 계산기 코드

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const hardCalculate = (number) => {
  console.log('어려운 계산!');
  for (let i = 0; i < 999999999; i++) {} // 생각하는 시간
  return number + 10000;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);

  const hardSum = hardCalculate(hardNumber);

  return (
  <div>
    <h3>어려운 계산기</h3>
    <input
      type="number"
      value={hardNumber}
      onChange={(e) => setHardNumber(parseInt(e.target.value))}
    />
    <span> + 10000 = {hardSum}</span>
  </div>
  );
}

export default App

=>delay가 있는 것을 확인 할 수 있다.

🌱 어려운 계산기 코드에 쉬운 계산기 추가 코드

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const hardCalculate = (number) => {
  console.log('어려운 계산!');
  for (let i = 0; i < 999999999; i++) {} // 생각하는 시간
  return number + 10000;
}

const easyCalculate = (number) => {
  console.log("쉬운 계산!")
  return number + 1;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  const hardSum = hardCalculate(hardNumber);
  const easySum = easyCalculate(easyNumber);

  return (
  <div>
    <h3>어려운 계산기</h3>
    <input
      type="number"
      value={hardNumber}
      onChange={(e) => setHardNumber(parseInt(e.target.value))}
    />
    <span> + 10000 = {hardSum}</span>

    <h3>쉬운 계산기</h3>
    <input
      type="number"
      value={easyNumber}
      onChange={(e) => setEasyNumber(parseInt(e.target.value))}
    />
    <span> + 1 = {easySum}</span>
  </div>
  );
}

export default App

=>return number + 1;의 쉬운 계산만 하였을 뿐인데 첫번째와 동일한 delay가 발생

❔도대체 왜❔ 나는 쉬운 계산(number+1)만 했을 뿐인데, 딜레이가 발생하는걸까?

App컴포넌트가 함수형 컴포넌트 이기 때문이다. 쉬운 계산기의 number를 증가시켜주면 easyNumber의 state가 변경된다.
state가 변경되었다는 말은 App컴포넌트가 다시 랜더링 된다는 것을 의미한다. 그래서, hardSum과 easySum 변수가 모두 초기화가 된다.
즉, hardNumber를 바꾸던 easyNumber를 바꾼던 상관없이 hardCalculate안에 있는 의미없는 for루프가 돌아가게되어서 delay가 발생한다. => 너무 비효율적이다.

🌱3. useMemo를 활용한 코드

import { useMemo, useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

const hardCalculate = (number) => {
  console.log('어려운 계산!');
  for (let i = 0; i < 999999999; i++) {} // 생각하는 시간
  return number + 10000;
}

const easyCalculate = (number) => {
  console.log("쉬운 계산!")
  return number + 1;
}

function App() {
  const [hardNumber, setHardNumber] = useState(1);
  const [easyNumber, setEasyNumber] = useState(1);

  //const hardSum = hardCalculate(hardNumber);
  const hardSum = useMemo(() => {              //useMemo 부분
    return hardCalculate(hardNumber);
  }, [hardNumber]);
  const easySum = easyCalculate(easyNumber);

  return (
  <div>
    <h3>어려운 계산기</h3>
    <input
      type="number"
      value={hardNumber}
      onChange={(e) => setHardNumber(parseInt(e.target.value))}
    />
    <span> + 10000 = {hardSum}</span>

    <h3>쉬운 계산기</h3>
    <input
      type="number"
      value={easyNumber}
      onChange={(e) => setEasyNumber(parseInt(e.target.value))}
    />
    <span> + 1 = {easySum}</span>
  </div>
  );
}

export default App

=> (useMemo를 사용하여)쉬운 계산을 할 때, delay이 없이 계산이 이루어지는 것을 확인할 수 있다.

🌱예시에 사용된 useMemo 구조 살펴보기

const hardSum = useMemo(() => {
    return hardCalculate(hardNumber);
  }, [hardNumber]);

콜백 함수: () => { return hardCalculate(hardNumber); }는 useMemo에 전달된 콜백 함수로, 실제로 메모이제이션하고자 하는 계산을 수행한다. 위의 예에서는 hardCalculate 함수를 호출하고 hardNumber를 인자로 전달하여 그 결과를 반환한다.
의존성 배열: [hardNumber]는 의존성 배열로, useMemo가 결과를 새로 계산해야 하는 조건을 정의합니다. 여기서는 hardNumber 값이 변경될 때마다 useMemo가 콜백 함수를 다시 실행하여 결과를 새로 계산하도록 설정되어 있다. 만약 hardNumber가 변경되지 않는다면, 이전에 계산한 hardSum 값을 재사용한다.

비슷한 역할을 하는 Hook이 또 있다고 하는데, 바로 useCallback이다.

🍀useCallback이란?

함수를 메모이제이션(memoization)하는 데 사용된다.
즉, 함수의 참조를 재사용할 필요가 있을 때 사용한다.

🍀useCallback 예시 코드 및 영상

🌱useCallback 사용 X

import { useEffect, useState } from 'react'
import './App.css'


function App() {
  const [Number, setNumber] = useState(0);
  const [toggle, setToggle] = useState(true);

  const someFunction = () => {
    console.log(`someFunc: number: ${number}`);
    return;
  };

  useEffect(() => {
    console.log('someFuction이 변경되었습니다.');
  }, [someFunction]);


  return (
  <div>
    <input
      type="number"
      value={Number}
      onChange={(e) => setNumber(parseInt(e.target.value))}
    />
    <button onClick={() => setToggle(!toggle)}>{toggle.toString()}</button>
    <br />
    <button onClick={someFunction}>Call someFunc</button>
  </div>
  );
}

export default App

=> 콘솔창을 확인해보니, 토글 버튼을 눌러 토글 스테이트가 변경될 때마다 useEffect가 실행되어 'someFuction이 변경되었습니다.'라는 로그가 콘솔에 출력되고 있다.
=> useEffect가 불필요하게 여러번 실행되고 있음.

🌱useCallback 사용 O 코드

import { useEffect, useCallback, useState } from 'react'
import './App.css'


function App() {
  const [number, setNumber] = useState(0);
  const [toggle, setToggle] = useState(true);

  const someFunction = useCallback(() => {
    console.log(`someFunc: number: ${number}`);
    return;
  }, [number]); //의존성 배열 number로 지정

  useEffect(() => {
    console.log('someFuction이 변경되었습니다.');
  }, [someFunction]);


  return (
  <div>
    <input
      type="number"
      value={number}
      onChange={(e) => setNumber(parseInt(e.target.value))}
    />
    <button onClick={() => setToggle(!toggle)}>{toggle.toString()}</button>
    <br />
    <button onClick={someFunction}>Call someFunc</button>
  </div>
  );
}

export default App

=> 이전 코드와 달리 토글 버튼을 클릭시 useEffect가 실행되지 않아 'someFuction이 변경되었습니다.'라는 로그가 콘솔창에 뜨지 않는 것을 확인 할 수 있다.
=> 대신 의존성 배열로 지정해준 number의 값이 변경 될 때만 콘솔창에 'someFuction이 변경되었습니다.'가 뜨는 것을 확인 할 수 있다.

🌱예시에 사용된 useCallback 구조 살펴보기

const someFunction = useCallback(() => {
    console.log(`someFunc: number: ${number}`);
    return;
  }, [number]);

useCallback 훅: useCallback은 첫 번째 인자로 전달된 함수를 메모리에 저장합니다. 저장된 함수는 의존성 배열([number])에 있는 값들의 변화에만 반응하여 업데이트됩니다.
함수 정의: () => { console.log(someFunc: number: ${number}); return; } 이 부분은 실제 저장되는 콜백 함수입니다. 이 함수는 콘솔에 number 변수의 현재 값을 출력합니다.
의존성 배열: [number] 이 배열은 useCallback에 의해 추적되는 의존성을 명시합니다. 여기서 number는 함수가 의존하는 변수입니다. 이 변수의 값이 변경될 때마다 useCallback은 새로운 함수를 메모리에 저장하여 이전 함수를 대체합니다.

요약

useMemo

• useMemo는 값의 계산을 메모이제이션하는 데 사용됩니다. 복잡한 계산 결과, 객체 리터럴, 배열 등 함수 호출 결과를 캐싱하여 재계산의 필요성을 줄이기 위해 사용합니다.
• useMemo는 계산된 값 자체를 반환합니다.

useCallback

• useCallback은 함수를 메모이제이션(memoization)하는 데 사용됩니다. 즉, 함수의 참조를 재사용할 필요가 있을 때 사용합니다. 이것은 특히 함수를 자식 컴포넌트에 props로 전달할 때 유용하며, 자식 컴포넌트가 불필요하게 재렌더링되는 것을 방지할 수 있습니다.
• useCallback은 함수 자체를 반환합니다.