UseMemo

17/12/2025
One-minute read

useMemo

값을 메모이제이션함
특히나 오래 걸리는, 자원을 많이 소모하는 연산일 경우, 컴포넌트 렌더링 시마다 해당 연산을 하는 것은 바람직하지 않음.
따라서 useMemo에서는 의존성 배열에 특정 값을 넣어서, 특정 값이 바뀌는 경우에만 해당 연산이 이뤄지도록 할 수 있다.

useMemo가 없는 코드

const FilterComponent = () => {
  const [query, setQuery] = useState("");
  const [count, setCount] = useState(0);

  const filtered = ITEMS.filter((item) => {
    console.log("필터 재계산");
    return item.name.toLowerCase().includes(query.toLowerCase());
  });

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />

      {filtered.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}

      <button onClick={() => setCount((c) => c + 1)}>+count</button>
      <div>{count}</div>
    </>
  );
};

useMemo를 활용한 코드

const FilterComponent = () => {
  const [query, setQuery] = useState("");
  const [count, setCount] = useState(0);

  const filtered = useMemo(() => {
    console.log("필터 재계산");
    return ITEMS.filter((item) =>
      item.name.toLowerCase().includes(query.toLowerCase())
    );
  }, [query]);

  return (
    <>
      <input value={query} onChange={(e) => setQuery(e.target.value)} />

      {filtered.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}

      <button onClick={() => setCount((c) => c + 1)}>+count</button>
      <div>{count}</div>
    </>
  );
};

query가 바뀔 때에만 필터 재실행
- count를 클릭해도 리렌더링이 되지만, filtered에 대한 계산은 스킵한다.
- 즉, 의존성 배열로 넣은 query의 값이 바뀌지 않으면 이전에 게산된 캐시를 그대로 반환하는 것이다.

React