useMemo 이해해보기

useCallback이나 useMemo는 불필요한 렌더링을 막기위해 사용된다. 컴포넌트 함수 호출이 필요한 경우에만 호출되야 렌더링 최적화를 이뤄낼 수 있다. 둘의 차이는 간단한데 이름에 나와 있다싶이 콜백은 함수이고 메모는 값이다. 

내용은 역시나 별코딩 강의를 통해서 학습했다. 진짜 쉽게 이해시켜주는데 다시 좀 콘텐츠를 만드셨으면 한다. 

리액트는 기본적으로 상태가 변하면 렌더링을 다시한다. 아래 코드에서보면 하드 넘버와 이지넘버가 상태로 지정되어 있는데 각 input의 값이 변하면 상태가 변하므로 app함수는 새로 호출될 것이다. 근데 생각해보면 하드넘버가 변하는데 easyCalculate 함수가 호출되는 것은 매우 비효율일 것이다. 반대도 마찬가지이다. 그래서 이지넘버, 하드넘버를 기억시켜 새로 함수가 호출되는 것을 막는다. 

useMemo를 사용하여 hardCalculate 계산된 값을 저장하고 의존성 배열에 hardNumber가 변경될 때만 이 함수가 호출되도록한다. 그래서 이지넘버가 변경되어도 hardCalculate가 호출되지 않는다.

다음 예시도 사실 비슷한데, location이 원시 타입이냐 객체 타입이냐 차이가 더 크다고 볼수 있다. 원시 타입은 메모리에 참조값이 저장되기 때문에 유즈이팩트의 의존성 배열에 location을 넣어도 useEffect가 재호출된다. 그래서 이런 경우에는 

useMemo로 기억시켜서 불필요한 함수가 호출되는 것을 방지한다.

이 번 프로젝트에서는 꼭 컴포넌트 최적화를 이뤄낼 것이다.