React useMemo

useMemo 이해하기

useMemo는 렌더링 중에 발생하는 연산량이 큰 함수의 결과값을 메모이제이션하며, 이전 결과값을 재사용할 수 있도록 도와준다

동일한 값을 리턴하는 함수를 반복적으로 호출할 경우 맨 처음 값을 메모리에 저장해서 필요할 때마다 또다시 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법이다. 간단히 말해서 자주 필요한 값을 맨 처음 계산할 때 캐싱 해놓아서 그 값이 필요할 때마다 다시 계산을 하는 것이 아니라 캐시에서 꺼내서 사용하는 것이다.

useMemo 남용할 경우 성능에 안좋아질 수 있다

useMemo는 성능 최적화의 목적으로 사용되긴 하지만, 무분별하게 사용할 경우 오히려 성능 저하를 초래할 수 있다.

• 메모이제이션 자체의 비용: 이 두 Hook을 사용하면 함수와 계산 결과를 캐싱하기 위한 메모리 사용량이 늘어난다. 게다가, 새롭게 계산되는 값이 일정 기간 동안 사용되지 않아도 메모리에 남아 있어야 하므로 메모리 관리의 측면에서 비효율적일 수 있다. (가비지 컬렉터가 무시)

• 의존성 배열의 관리: useCallback과 useMemo는 의존성 배열이 필요한데, 이 배열에 들어간 값들이 변경될 때마다 메모이제이션 된 값을 무효화하고 새로 계산한다. 이 과정에서 복잡성이 증가하며, 관리가 미흡한 경우 오히려 성능이 저하될 수 있다.

• 남용에 따른 실수: 무분별한 사용으로 인해 모든 함수나 결과값을 메모이제이션하려 할 때 실수가 발생할 가능성이 높아진다. 이로 인해 성능 최적화를 기대하는 대신 버그나 성능 저하를 초래할 수 있는 상황이 생길 수 있다.

useMemo 사용법

useMemo는 첫 번째 인자로는 콜백함수, 두 번째 인자로는 의존성 배열을 받아 총 두 개의 인자를 받는다.

const result = useMemo(() => {
  return add();
}, [value]);

첫 번째 인자인 콜백 함수가 return 하는 값이 바로 useMemo가 return 하는 값, 즉 result의 값이 된다.

두 번째 인자인 의존성 배열은 배열 안의 요소가 업데이트될 때마다 useMemo의 콜백 함수를 재실행시킨다. 콜백 함수를 재실행시킴으로써 메모리에 저장된 값은 업데이트되어 메모리에 새로 저장된다.

빈 배열일 경우 제일 처음 마운트될 때만 값을 메모리에 저장하고 그 이후엔 메모리에 있는 값만 불러오게 된다