useMemo를 실제로 비용이 큰 파생 계산에만 적용합니다.
useMemo는 dependency가 같을 때 계산 결과를 재사용합니다. 정확성을 위한 장치가 아니라 측정된 렌더 병목을 줄이는 최적화입니다.
Profiler로 빈도와 비용을 먼저 측정합니다.
모든 객체와 함수를 메모하면 복잡성과 메모리 비용이 늘어납니다.
useMemo가 없으면 틀리는 코드는 상태나 의존성 설계를 먼저 고쳐야 합니다.
로컬 프로젝트에서 확인해보세요목록 크기를 늘리고 검색 반응을 비교하세요.
import { useMemo, useState } from "react";
const items = Array.from({ length: 3000 }, (_, id) => ({ id, title: "강좌 " + id }));
export default function App() {
const [query, setQuery] = useState("");
const visible = useMemo(() => items.filter((x) => x.title.includes(query)), [query]);
return (
<main>
<input value={query} onChange={(e) => setQuery(e.target.value)} />
<p>{visible.length}개</p>
<ul>
{visible.slice(0, 5).map((x) => (
<li key={x.id}>{x.title}</li>
))}
</ul>
</main>
);
}