useCallback

 

🧠 useCallback이 뭐예요?

useCallback은 함수를 기억해두는 React의 도구예요.
쉽게 말해서, "불필요하게 함수를 새로 만들지 않도록" 도와줘요.

왜 이게 필요하냐고요?
React에서는 컴포넌트가 업데이트될 때마다 함수도 새로 만들어질 수 있어요.
이렇게 새로 만들어진 함수가 많아지면 성능에 안 좋은 영향을 줄 수 있거든요.

 

🍳 요리 이야기로 이해하기

여러분이 요리사라고 상상해보세요. 👩‍🍳👨‍🍳
레시피를 보고 계란후라이를 만드는 함수를 매번 새로 적는다고 생각해 보세요.

• 첫 번째 요리: 계란후라이 레시피 작성 📝
• 두 번째 요리: 또 계란후라이 레시피 작성 📝
• 세 번째 요리: 또 또 계란후라이 레시피 작성 📝

너무 비효율적이지 않나요? 똑같은 레시피를 왜 계속 새로 쓰죠?
한 번만 레시피를 적고 기억해두면 필요할 때 꺼내 쓰면 되잖아요?

이게 바로 **useCallback**의 핵심 아이디어예요.
"한 번 만들어진 함수(레시피)를 기억해두고 재사용한다!"

 

🛠️ 예시 코드로 알아보기

이제 실제 React 코드로 확인해볼게요.

 

❌ useCallback을 사용하지 않은 경우

import React, { useState } from 'react';

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

  // 버튼을 클릭할 때 호출되는 함수
  const handleClick = () => {
    setCount(count + 1);
  };

  console.log("새로운 handleClick 함수가 만들어졌어요!");

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
}

export default Counter;

이 코드의 문제는 컴포넌트가 리렌더링될 때마다 handleClick 함수가 새로 생성된다는 점이에요.
매번 새로 만드는 건 낭비잖아요?

 

✅ useCallback을 사용한 경우

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

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

  // useCallback을 사용해 함수를 기억해요
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 바뀔 때만 함수를 새로 만들어요

  console.log("handleClick 함수는 기억되고 있어요!");

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>+1 증가</button>
    </div>
  );
}

export default Counter;

 

🔍 코드에서 무슨 일이 일어날까?

1. useCallback의 역할
   • useCallback은 handleClick 함수를 기억해둬요.
   • count가 바뀌지 않으면 이전에 만들어둔 함수를 그대로 사용해요.
2. 의존성 배열([count])
   • 만약 count 값이 바뀌면 그때만 새로운 함수를 만들어요.
3. 결과
   • 함수가 필요할 때만 새로 생성되니까 성능이 좋아져요!
   •  

🚀 한 줄 요약

useCallback은 함수를 기억해서, 불필요하게 새로 생성되지 않도록 도와주는 도구예요.
여러 번 같은 레시피를 적지 말고, 기억해 두고 꺼내 쓰면 더 효율적이겠죠?