React(44) 리액트 훅 - useMemo 란?

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>;
}