리액트 `useMemo`에 대한 설명

useMemo에 대해 스스로 내용을 정리해 보았습니다.

---

useMemo ?

 

useMemo의 가장 간단한 정의는

`재렌더링 사이에 계산 결과를 캐싱할 수 있게 해주는 Reack Hook` 입니다.

const cachedValue = useMemo(calculateValue, dependencies)

---

[ 레퍼런스 ]

 

컴포넌트의 최상위 레벨에 있는 `useMemo`를 호출하여 재렌더링 사이의 계산을 캐싱합니다.

import { useMemo } from 'react';

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(
    () => filterTodos(todos, tab),
    [todos, tab]
  );
  // ...
}

 

- 매개변수

• calculateValue : 캐싱하려는 값을 계산하는 함수입니다. React는 초기 렌더링 중에 함수를 호출합니다. 다음 렌더링에서, React는 마지막 렌더링 이후 dependencies가 변경되지 않았을 때 동일한 값을 다시 반환합니다. 그렇지 않다면 calculateValue를 호출하고 결과를 반환하며, 나중에 재사용할 수 있도록 저장합니다.
• dependencies : calculateValue 코드 내에서 참조된 모든 반응형 값들의 목록입니다. 반응형 값에는 props, state와 컴포넌트 바디에 직접 선언된 모든 변수와 함수가 포함됩니다. 의존성 목록은 일정한 수의 항목을 가져야 하며, `[dep1, dep2, dep3]`와 같이 인라인 형태로 작성돼야 합니다.

- 반환값

• 초기 렌더링에서 useMemo는 인자 없이 calculateValue를 호출한 결과를 반환합니다.
• 다음렌더링에서, 마지막 렌더링에서 저장된 값을 반환하거나, calculateValue를 다시 호출하고 반환된 값을 저장합니다.

- 주의 사항

• useMemo는 Hook이므로 컴포넌트의 최상위 레벨 또는 자체 Hook에서만 호출할 수 있습니다. 반복문이나 조건문 내부에서는 호출할 수 없습니다. 만일 호출이 필요하다면 새 컴포넌트를 추출하고 상태를 그 안으로 옮겨야 합니다.
• React는 캐싱된 값을 버려야 할 특별한 이유가 없는 한 버리지 않습니다.

반환값을 캐싱하는 것을 memoization이라고 하며, 이 훅을 useMemo라고 부르는 이유입니다.

성능 최적화를 위해서만 `useMemo`를 사용해야 합니다.
이 기능이 없어서 코드가 작동하지 않는다면 근본적인 문제를 먼저 찾아서 수정하세요.
그 후 `useMemo`를 사용하여 성능을 개선해야 합니다.

---

useCallback은 어떤 Hook일까 + useMemo와의 차이점

useCallback은 어떤 Hook일까 + useMemo와의 차이점

---

https://ko.react.dev/reference/react/useMemo

useMemo – React