react - useMemo

개요

useMemo 는 비용이 큰 연산에 대해 결과를 메모이제이션해 두고, 저장된 값을 반환하는 훅이다.
리액트 최적화를 얘기할 때 가장 많이 언급되는 훅이다.

import { useMemo } from 'react'

const memoizedValue = useMemo(() => expensiveComputation(a, b), [a, b]);

첫번째 인수는 특정 값을 반환하는 생성 함수를, 두번째 인수로는 해당 함수가 의존하는 값의 배열을 전달한다.
렌더링 발생 시 의존성 배열의 값의 변경이 없다면, 함수를 재실행하지 않고 이전에 기억해 둔 해당 값을 반환한다.
변경이 있었다면, 함수를 새로 실행해 값을 반환하고 해당 값을 기억한다.

메모이제이션의 반환값으로 컴포넌트도 올 수 있다.

• Memoized Component: 기억되고 있는 컴포넌트로, 의존성 배열의 값이 변화되지 않으면 리렌더링되지 않는다.

비용이 많이 드는 연산에서 useMemo 가 쓰인다는 것은 알았다. 그럼 모든 함수와 컴포넌트에 useMemo 를 적용하면 좋은거 아닌가?

하는 궁금증이 들었다.

관련 내용은 추가로 공부해 정리해보았다.