[07-React] 6-8. React Hook :: useCallback

8. useCallback

: 인수로 넘겨 받은 "callBack" 을 캐싱

    => 함수에 대한 저장(메모리제이션)

: 동일한 함수가 계속 재사용되므로 불필요한 리렌더링을 방지

const cachedFn = useCallback(fn, dependencies)

• 첫번째 인수로 캐싱할 함수
• 두번째 인수로 의존성 배열

: 자식 컴포넌트가 React.memo로 최적화된 경우, 자식으로 함수를 보낼 경우 callback을 통해 렌더링 방지

: 자주 되는 함수일 경우 매번 재생성 하지 않고 메모리에 캐싱된 함수를 재사용

const ChildComponent = React.memo(({ onClick }) => {
  console.log('Child component rendered');
  return <button onClick={onClick}>Click Me</button>;
});

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

  // useCallback을 사용하여 함수를 메모이제이션
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // 의존성 배열이 빈 배열이면, 부모 컴포넌트가 처음 렌더링될 때만 함수가 생성됨

  return (
    <div>
      <p>Count: {count}</p>
      <ChildComponent onClick={increment} />
    </div>
  );
};

---

8-1. 의존성 배열

: hook의 경우 사용 시, 해당이 중요

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

  // count가 변경될 때마다 새로운 함수를 생성
  const increment = useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, [count]); // count가 변경되면 increment 함수가 새로 생성됨

  return <button onClick={increment}>Increment</button>;
};

const increment = useCallback(() => {
  setCount(prevCount => prevCount + 1);
}, []); // 빈 배열을 설정하면 count가 변경되어도 함수를 새로 생성하지 않음

---

참조

ASAC 수업자료

https://ko.react.dev/reference/react/useCallback

useCallback – React