useCallback vs useMemo 개념

이전에 작업한 코드를 다시 되짚어 보면서 useCallback과 useMemo의 개념을 정리해본다.

경고 사항을 수정하려고 하니... 챗GPT의 도움 받아서 결국 수정을 했다.

 

🧠 useCallback vs useMemo 개념 정리

 

🔥 진짜 간단하게 비유하자면

• useCallback : "내가 만든 함수 기억해둬!"
• useMemo : "내가 계산한 결과 기억해둬!"

✨ 각각 조금 더 자세히

📌 useCallback

✅ 무엇?

"함수"를 기억해서 매번 새로 만들지 않고, 필요할 때만 새로 만들겠다는 뜻.

const memoizedFunction = useCallback(() => {
  console.log('나는 기억된 함수야');
}, [dependency1, dependency2]);

 

• dependency(의존성)가 바뀌지 않으면 memoizedFunction은 매 렌더링 때 같은 함수다.
• dependency가 바뀌면 새 함수로 다시 만들어진다.

✅ 왜 필요해?

• 함수를 props로 다른 컴포넌트에 넘길 때, 매번 새로 만드는 걸 방지하기 위해.
• 특히 자식 컴포넌트가 React.memo() 되어 있을 때 필수다.

✅ 함수를 매번 새로 만들면 불필요한 리렌더링 발생한다!
(→ useCallback으로 막을 수 있다.)

 

---

📌 useMemo

✅ 무엇?

"값"을 기억해서 렌더링할 때마다 다시 계산하지 않고, 필요할 때만 계산하겠다는 뜻.

 

const memoizedValue = useMemo(() => {
  return 아주_무거운_계산();
}, [dependency1, dependency2]);

• dependency가 바뀌지 않으면 memoizedValue는 그대로 유지된다.
• dependency가 바뀌면 계산을 다시 한다.

✅ 왜 필요해?

• 무거운 연산(예: 복잡한 배열 계산, 필터링 등)이 있을 때
• 매 렌더링마다 다시 계산하는 걸 막고 싶을 때
• 성능 최적화할 때

✅ 값을 매번 새로 계산하면 성능이 떨어진다!
(→ useMemo로 최적화할 수 있다.)

 

📢 정말 중요한 핵심 요약

useCallback은 결국 useMemo를 함수에만 적용한 특수한 버전이다!

// 사실 useCallback 내부는 이렇게 구현되어 있어
useCallback(fn, deps) === useMemo(() => fn, deps)

 

---

✨ 실제 상황 예시

✅ useCallback 써야 하는 경우

const handleClick = useCallback(() => {
  console.log('버튼 클릭!');
}, []);

<Button onClick={handleClick} />

버튼에 넘기는 onClick 함수를 기억해서 불필요한 렌더링을 막는다.

 

✅ useMemo 써야 하는 경우

const expensiveResult = useMemo(() => {
  console.log('비싼 계산!');
  return array.filter(item => item.value > 10);
}, [array]);

array가 안 바뀌면 filter 작업을 다시 하지 않고 기존 결과를 재사용한다.

 

 

✨ 정리 문장

useCallback은 함수 재생성을 막고,
useMemo는 값 재계산을 막는다.

 

 

✨ 초간단 외우는 법

• 함수면 → useCallback
• 데이터면 → useMemo

 

* 위 포스팅은 챗GPT 답변을 토대로 작성되었습니다.