[React] useCallback

useCallback 또한 메모이제이션 기법으로 컴포넌트 성능을 최적화 시켜주는 도구이다.

 

useCallback은 인자로 전달한 콜백 함수 그 자체를 메모이제이션 하는 것이다.

 

function Component() {
  const calculate = (num) => {
    return num + 1;
  }
  return <div>{value}</div>
}
export default Component;

 

calculate 함수를 메모이제이션 하려면 useCallback으로 calculate 함수를 감싸주면 된다. 

그리고 calculate 함수가 다시 필요할 때마다 함수를 새로 생성하는 것이 아닌 필요할 때마다 메모리에서 가져와서 재사용하는 것이다.

 

function Component(){
  const calculate = useCallback((num)=>{
     return num +1;
}, [item])
  return <div>{value}</div>
}