useMemo()에서 dependency 배열을 잘못 관리했을 때 발생하는 문제

React에서 useMemo를 사용할 때 dependency 배열을 어떻게 관리하느냐는 단순한 성능 최적화 문제를 넘어 데이터의 최신 상태를 반영할 수 있느냐 없느냐와 직결된다는 것을 배웠다.

 

예를 들어 이런 코드가 있다고 하자.

const selectedDataWarehouseTable = useMemo(
  () => (dataWarehouseTablesData ?? []).find(
    (t: any) => t.id === selectedDataWarehouseTableId
  ),
  [selectedDataWarehouseTableId] // ❌ dataWarehouseTablesData 빠짐
);

 

겉보기엔 잘 동작하는 것처럼 보인다. 특히 Next.js에서 다른 페이지로 갔다가 다시 돌아올 경우, 컴포넌트가 새로 마운트되면서 useMemo도 처음부터 실행되기 때문에 dataWarehouseTablesData의 최신 값이 반영된다. 그래서 "어? 잘 되네?"라고 착각하기 쉽다.

 

하지만 문제는 같은 페이지 안에서 데이터만 갱신될 때 발생한다. 예를 들어 React Query가 dataWarehouseTablesData를 refetch해서 새로운 배열을 내려주더라도, useMemo는 dependency 배열 안에 dataWarehouseTablesData가 없으니 "다시 계산해야 한다"는 사실을 알 수 없다. 그 결과 selectedDataWarehouseTable은 여전히 이전 값을 가리키게 되고, 화면은 최신 데이터를 반영하지 못한다.

 

이는 의존성을 올바르게 설정하면 이런 문제가 해결된다.

const selectedDataWarehouseTable = useMemo(
  () => (dataWarehouseTablesData ?? []).find(
    (t: any) => t.id === selectedDataWarehouseTableId
  ),
  [dataWarehouseTablesData, selectedDataWarehouseTableId] // ✅ 두 값 모두 넣기
);

 

이제는 selectedDataWarehouseTableId가 바뀌어도, dataWarehouseTablesData가 새 배열로 교체돼도 useMemo가 다시 실행되어 항상 최신 값을 반환한다.