[React] useCallback

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.useCallback

리액트 훅 중 하나로, 메모이제이션된 콜백 함수를 반환합니다. 주로 함수가 불필요하게 재생성되는 것을 방지하여 성능을 최적화할 때 사용됩니다.

자식 컴포넌트에 props로 전달할 때 불필요하게 다시 렌더링되는 것을 방지하기 위해 자주 사용됩니다.

 

 

useCallback을 사용하여 이 함수가 한 번만 생성되도록 합니다. 의존성 배열이 빈 배열이므로 컴포넌트가 마운트될 때 한 번만 생성됩니다.

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

function ChildComponent({ onClick }) {
  console.log('ChildComponent 렌더링');
  return <button onClick={onClick}>클릭하세요</button>;
}

function App() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(false);
  // useCallback을 사용하여 함수 메모이제이션
  const handleClick = useCallback(() => {
    setCount(prevCount => prevCount + 1);
    console.log('함수렌더링');
  }, []); // 빈 배열: 이 함수는 한 번만 생성됩니다.

  return (
    <div>
      <p>클릭 횟수: {count}</p>
      <ChildComponent onClick={handleClick} />
      <button onClick={() => setOtherState(!otherState)}>다른 상태 변경</button>
    </div>
  );
}

export default App;