[React] useCallback - useCallback 이론 & 활용법

이번 글은 useCallback에 대한 글이다.

---

 

[ useCallback ]

함수의 재생성 방지를 위해 사용

=> 함수가 진짜 변경될 때만 새로 생성하라고 하는 훅

 

=> ex.React에서 컴포넌트의 리렌더링 → 컴포넌트 내 함수들도 매번 새롭게 만들어짐

(이때, useEffect의 디펜던시로 함수가 전달되거나 자식 컴포넌트에 props로 내려가지면 무한루프같은 불필요한 리렌더링이 됨)

 

 

---

 

[ useCallback의 구성 ]

• 콜백함수 : 선언할 함수를 콜백함수의 실행부분에 전달해줌
• 디펜던시 리스트 : useCallback 함수를 언제 새로 생성할지 지정

useCallback(콜백함수, 디펜던시 리스트);

 

 

---

 

 

[ useCallback의 사용 시점 ]

1. 함수를 자식 컴포넌트의 props로 넘길 때 → 필수

2. 함수가 useEffect나 useMemo 안에서 의존성으로 쓰일 때 → 권장

3. 컴포넌트가 리렌더링이 자주 일어나는 구조일 때 → 유용

=> 단순 이벤트 핸들러, 부모 안에서만 쓰는 함수 (불필요)

 

=> 따라서, “이 함수가 자식에게 내려가거나, 다른 훅에서 의존성으로 쓰이나?” → 그렇다면 useCallback을 써야함

 

 

---

 

[ useCallback 활용 예제 ]

Parent가 리렌더링돼도 handleClick은 같은 함수 객체를 유지해서 Child는 불필요하게 리렌더링되지 않음.

import { useCallback, useState } from "react";

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

  // ✅ useCallback으로 함수 재사용
  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []); // 의존값 배열이 빈 배열이니까 최초 1회만 생성

  return (
    <>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <Child onClick={handleClick} />
    </>
  );
}

 

 

---