💻 작성 이유

프로젝트를 정리하면서, 팀원들의 느낀점을 보다가 데이터 캐싱이라는 단어가 자주 나와서 관심을 가지고 찾아보았다. 그러다가 데이터 캐싱과 관련된 것 중에, useMemo, useCallback 가 눈에 들어왔다. 그래서 가볍게 찾아보고 다음 프로젝트에는 이에 대한 생각을 하면서 진행해보려고 한다.

📌 useCallback

⭐ 기능

함수를 실행 또는 생성함에 있어서 렌더링이 될 때마다 실행 및 생성하는 것이 아니라, 관련된 의존성 인자가 변경될 때만 실행되는 최적화 Hook이다.

⭐ 예시 코드

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

function Example() {
  const [count, setCount] = useState(0);

  // useCallback을 사용하여 handleClick 함수를 최적화합니다.
  const handleClick = useCallback(() => {
    if (count > 10) return;
    setCount(prevCount => prevCount + 1);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase Count</button>
    </div>
  );
}

보통 일반적인 함수는 렌더링 될 때마다 실행되기 때문에 handleClick이라는 함수가 계속 실행되는데, count가 변하지 않는다면, 실행되지 않아서 최적화 된다는 것이다. [] 이렇게 빈 배열로 작성하는 것이 최적화에 도움이 된다고 한다. 딱 한번만 실행되니까.

📌 useMemo

⭐ 기능

useCallback은 함수의 생성 및 실행과 관련되어 있지만, useMemo 같은 경우에는 값의 변화에 따라서만 실행됨을 의미하는 최적화 Hook이다. 이해가 잘 안되는 것 같으니 다음 코드를 살펴보자.

⭐ 예시 코드

import React, { useState, useMemo } from 'react';

function Example() {
  const [number, setNumber] = useState(0);

  // useMemo를 사용하여 계산 결과를 최적화합니다.
  const isEven = useMemo(() => {
    console.log('isEven 계산');
    return number % 2 === 0;
  }, [number]);

  return (
    <div>
      <p>Number: {number}</p>
      <p>{isEven ? '짝수' : '홀수'}</p>
      <button onClick={() => setNumber(prevNumber => prevNumber + 1)}>Increase Number</button>
    </div>
  );
}

해당 코드에서는 number의 값이 바뀔때만 isEven이 실행되고 값이 바뀐다. 그러니까 값을 변경할 때는 useMemo, 함수 자체를 최적화로 리렌더링 될 때만 실행되는 것을 useCallBack이라고 생각하면 될 것 같다.

👀 일단은 갑자기 생각나서 글을 올려두는 것인데, 일단 다음 프로젝트를 진행하면서, 생각해봐야할 것 같다. 그리고 써먹어봐야할 것 같다. React-Devtools를 사용해보라고 하는데, 해당 extensions를 통해서 최적화가 되고 있는지 확인해야겠다. 나도 '데이터 캐싱' 이라는 것에 도전해봐야지!