React : useCallback/useMemo

React에서 useCallback과 useMemo는 성능 최적화를 위한 훅(Hook)으로, 불필요한 렌더링과 연산을 방지하는 역할을 한다.

1. useCallback

콜백 함수의 메모이제이션을 수행하여 불필요한 함수 재생성을 방지하는 훅이다.

메모이제이션(Memoization)?
컴퓨터 알고리즘 용어로, 동일한 계산을 반복해야 할 경우 한 번 계산한 결과를 메모리에 저장해 두었다가 꺼내 씀으로써 중복 계산을 방지할 수 있게 하는 기법이다

사용목적

• 컴포넌트가 렌더링될 때마다 함수가 새로 생성되는 문제를 방지
• 자식 컴포넌트에 콜백함수를 전달할 때 불필요한 리렌더링을 막기 위해 사용

import {useCallback, useState } from "react";

const MyComp = ()=>{
const [count,setCount] = useState(0);

//🔴 함수가 매번 새로 생성됨
//const increment = ()=> setCount(count+1);

//🟢 useCallback을 사용 → count가 변경될 때만 새로운 함수 생성
const increment = useCallback(()=>{
	setCount((prev)=>prev+1);
    },[]);
    
    return(
    <div>
    	<p>Count : {count} </p>
        <button onClick ={increment}>증가</button>
    </div>
    );
 };

useCallback 언제 사용해야할까?

• 함수를 자식 컴포넌트에 프롭스로 넘길 때
• React는 새 함수가 생성되면 다른 함수로 인식하여, 자식이 불필요하게 리렌더링 된다. → useCallback으로 해결!
• 랜더링마다 같은 함수를 유지해야 할 때

---

2. useMemo

• 연산된 값(변수)의 메모이제이션을 수행하여 불필요한 계산을 방지하는 훅이다.

사용목적

• 연산 비용이 높은 작업을 렌더링할 때마다 다시 계산하는 것을 방지하기 위해 사용한다.

import { useMemo, useState } from "react"

const MyComp = () => {
const [count, setCount] = useState(0);
const [number,setNumber] = useState(10);

//🔴 number가 바뀔 때만 연산해야 하는데 매번 연산이 수행됨
//const Result = slowFunction(number);

//🟢 useMemo 사용 → number가 변경될 때만 연산 수행
const Result = useMemo(()=> slowFunction(number),[number]);

function slowFunction(num){
console.log("s...l...o....w.....);
return num*2 ;
}

return(
	<div>
    	<h2> Result : {Result} </h2>
        <button onClick={() => setCount(count + 1)}>Increase Count</button>
        <button onClick={() => setNumber(number + 1)}>Change Number</button>
    </div>
  );
        

useMemo 언제 사용해야 할까?

• 연산 비용이 큰 계산 결과를 캐싱할 때 ex) 배열 필터링, 데이터 정렬, 복잡한 수학 연산 등
• 랜더링마다 같은 값을 유지해야 할 때 ex) 특정 값이 변경되지 않는 한 동일한 값을 유지하고 싶을 때

---

3. useCallback vs useMemo 차이

	useCallback	useMemo
기능	함수 자체를 캐싱	계산된 값을 캐싱
리턴 값	메모이제이션된 함수	메모이제이션된 값
언제 사용?	콜백 함수가 매번 새로 생성되는 것을 방지할 때	연산량이 큰 작업의 불필요한 반복을 방지할 때

useCallback과 useMemo 같이 사용하기

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

const Example = () => {
  const [count, setCount] = useState(0);
  const [items, setItems] = useState([1, 2, 3, 4, 5]);

  // ✅ useMemo → items 배열을 필터링한 결과를 메모이제이션
  const filteredItems = useMemo(() => {
    console.log("필터링 실행!");
    return items.filter((item) => item % 2 === 0);
  }, [items]);

  // ✅ useCallback → setCount 함수가 렌더링마다 새로 생성되는 것을 방지
  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>+</button>
      <h2>Filtered Items: {filteredItems.join(", ")}</h2>
    </div>
  );
};

---

언제 사용해야 할까?

• useCallback, useMemo를 남용하면 오히려 성능이 저하될 수 있다. React의 내부 최적화(React.memo, useState의 배치 업데이트 등)가 충분히 좋기 때문에 useCallback, useMemo를 쓰지 않아도 최적화가 잘 되는 경우가 많다. "컴포넌트가 너무 자주 렌더링된다"거나 "연산이 너무 무겁다"는 문제가 발생할 때 적용하는 것이 좋다.
• 불필요한 리렌더링이 발생하는 곳에만 사용하자!

📌 👉 핵심은 "진짜 필요한 곳에서만 사용"하는 것!