memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.
memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.
작성된 컴포넌트 함수는 React 앱에서 랜더링(rendering)이 일어날 때마다 호출이 됩니다. 컴포넌트 함수가 호출이 되면 그 안에 자바스크립트 로직들이 수행되고, 이를 기반으로 JSX로 마크업된 UI가 리턴되는 기본 구조를 가지고 있죠.
React에서 컴포넌트의 랜더링은 한 번 일어나고 끝이 아니라 수시로 계속 일어날 수 있습니다.
useMemo란 성능 최적화를 위하여 연산된 값을 재사용하는 기능을 가진 함수라고 합니다.
useMemo에 첫번째 파라미터에는 어떤 연산을 할지 함수를 정의해주면 되고
두번째에는 useEffect와 마찬가지로 deps배열을 넣어주면 되는데 이는 이 배열 안에 넣은 내용이 변경되면 우리가 등록한 함수를 호출해서 값을 연산해준다.
useMemo 함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토리 함수이고, 두번째는 기존 결과값 재활용 여부의 기준이되는 입력값 배열입니다.
기존에 메모리의 어딘가에 저장해두었던 z 값을 그대로 사용하는 것입니다.
function MyComponent({ x, y }) { const z = useMemo(() => compute(x, y), [x, y]); return <div>{z}</div>; }
출처: https://devbirdfeet.tistory.com/136 [새발개발자]