[ React ] React Hooks 정리 5 - useCallback ( + useMemo와 차이점 )

 

‼️useMemo에 이어서 useCallback에서도 일단 알고 진행해야하는 개념

메모이제이션

메모이제이션이란 계산된 값을 자료구조에 저장하고
이후 같은 계산을 반복하지 않고 이전에 계산한 값을 자료구조에서 꺼내 재사용하는 것을 말한다

 

 

useCallback

사용형태

인자로 전달한 콜백함수 자체를 메모이제이션 해주는것 ! 

const func = useCallback(()=>{

     // 메모이제이션해줄 값 ( 함수 또는 값 )

}, [ 의존성 배열 ] )

 

useCallback을 사용하면 컴포넌트가 재렌더링이 일어나도 초기화 되지 않고
메모이제이션 된 함수 자체를 계속 갖고 있으면서 재활용 한다.

 

useMemo와 비슷한데 차이점은

useMemo는 값을 메모이제이션하여
의존성 배열에 있는 값의 변경을 감지하여 캐싱된 값을 반환하는 반면
useCallback은 함수를 메모이제이션 하여
의존성 배열에 있는 값의 변경을 감지하여 캐싱된 함수 자체를 다시 반환하는 것의 차이이다.

 

 

useMemo와 비슷한 형태라서 따로 예제는 정리하지 않고 
전에 썼던 useMemo예제를 참고하는것이 좋을것 같다.

 

[ React ] React Hooks 정리 4 - useMemo

 

---

✔️ 참고

https://www.youtube.com/watch?v=XfUF9qLa3mU&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=7