useCallback과 React.memo, useMemo 를 사용하여 최적화 하기

React.memo

export default React.memo(Left);

형태로 정의하면 이전 props와 현재 props를 비교하여 값의 변화가 없으면 Left 컴포넌트를 다시 호출하지 않아 불필요한 리프레시를 방지한다.
props에 매우 많은 값이 들어있으면 비교하는것 자체가 부하를 주기 때문에 잘 판단해야한다.

비교할 때 === 연산자로 비교한다고 보면 되는데 원시타입은 값자체가 같으면 같아도 인식하지만, 오브젝트, 함수등은 컴포넌트를 호출하는 곳에서 재실행이 됐다면 새로운 함수로 인식하게 된다. 따라서 프롭스에 함수가 있다면 그 함수를 useCallback 으로 재생성되지 않도록 조치가 필요하다.

useCallback

정의한 함수를 리액트의 내부 저장 공간에 저장해서 함수 객체가 실행될 때마다 이를 재사용할 수 있게 한다.

const f = useCallback(()=>{

}, []);

useEffect와 마찬가지로 의존성 배열이 필요함. 같은 의미이다.

특히 유의할 점은 함수 안에 외부에서 변하는 값이 있을 때 의존성을 정의하지 않으면 함수는 클로저로 생성 당시 값을 그대로 유지하기 떄문에 원하는 기능을 할 수 없다.

useMemo

useCallback이 함수를 저장하는 것이라면 useMemo는 값을 저장한다.

const listData = useMemo(()=>[1,2,3], []);

useMemo 두 번째 인자는 useCallback 과 마찬가지로 데이터가 변경되야 할 조건이 외부 의존성을 정의한다.

함수가 재평가될 때마다 비용이 많이 들어가는 데이터 처리 작업을 해야하는 로직이 있다면 유용하다. 작업한 결과를 처리 후 저장해놓고 재사용하면 된다.

원시타입이 아닌 함수, 오브젝트는 재평가 될 때마다 새로운 메모리에 데이터가 생성됨을 유의해야한다. 외부 의존성을 비교할 때 오브젝트, 함수가 있다면 그 오브젝트, 함수는 재생성되는 값이 아닌지 유의해서 사용한다. 재생성되는 값이라면 그 값들도 useMemo, useCallback을 이용하여 바뀌지 않다록 조치해야한다.