예전에 강의에서 debounce와 throttle을 다루면서 메모이제이션이라는 개념과 useCallback에 대해서 잠깐 배운 적이 있는데, 블로그에 정리하는 것을 깜빡해서 지금 정리해본다.
메모이제이션
먼저 메모이제이션이란 프로그래밍을 할 때 반복되는 결과를 메모리에 저장해서 다음에 같은 결과가 나올 때 빨리 실행하는 코딩 기법을 말한다. 그리고 React에서 제공하는 메모이제이션 기법은 React.memo, useMemo와 useCallback이 있다.
React.memo
React.memo는 컴포넌트 자체를 메모이제이션한다. 부모 컴포넌트로 넘겨받는 props가 같다면 메모이제이션 해둔 렌더링 결과를 가져온다. 메모이제이션 한 내용을 재사용하여 렌더링시 가상 DOM에서 달라진 부분을 확인하지 않아 성능 상의 이점이 생기게 된다.
useMemo
useMemo는 메모이제이션 된 값을 return 하는 훅이다. useMemo는 이전 값을 기억해두었다가 조건에 따라 재활용하여 성능을 최적화하는 용도로 사용된다.
useCallback
useCallback은 함수 자체를 메모이제이션한다. 자바스크립트에서 함수는 객체로 취급되기 때문에 리렌더링이 일어날 때마다 새로운 함수가 생성된다. 자식 컴포넌트의 불필요한 리렌더링을 막기 위해선 useCallback으로 감싸줘야 한다. deps에 들어있는 의존성 값이 변경되지 않는다면 이전에 생성한 함수의 참조 값을 반환해준다.
