1. useMemo란?

useMemo는 React 컴포넌트가 리렌더링될 때 비싼 계산(expensive calculation) 을 매번 다시 수행하지 않도록, 값을 메모이제이션(memoization) 해 주는 Hook으로 useMemo는 리소스를 많이 쓰는 함수들을 렌더링 할 때마다 다시 호출하는 것을 방지해서 리소스 낭비를 막을 수 있다. (메모이제이션)

즉, 지정한 의존성 배열(deps) 안의 값이 바뀔 때만 함수를 다시 실행하고, 그렇지 않으면 이전에 계산한 결과를 그대로 재사용한다.

useMemo는 2개의 인자를 받는다.(콜백함수,배열)

const memoizedValue = useMemo(() => {
  // 1) 여기서 비싼 계산 실행
  return computeExpensiveValue(a, b);
}, [a, b]);
// a 또는 b가 바뀔 때만 computeExpensiveValue 재호출

• 콜백함수 : 메모이제이션할 값을 받아서 리턴 (결과를 반환하는 함수를 return값으로 넣는다)
• 배열(의존성 배열) : 배열안에 있는 값이 업데이트 될 때만 다시 메모이제이션

2. useMemo 활용

useMemo를 활용한 연산함수 (긴 리스트 필터링 최적화)

import React, { useState, useMemo } from 'react';

function filterItems(items, query) {
  console.log('Filter running…');
  return items.filter(item =>
    item.toLowerCase().includes(query.toLowerCase())
  );
}

export default function ItemList({ items }) {
  const [query, setQuery] = useState('');

  // useMemo 없을 때: query가 바뀌지 않아도, 부모가 리렌더링되면 매번 filterItems 실행
  // useMemo 적용 시: items 또는 query가 바뀔 때만 filterItems 실행
  const filtered = useMemo(
    () => filterItems(items, query),
    [items, query]
  );

  return (
    <div>
      <input
        placeholder="검색어 입력"
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ul>
        {filtered.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

• 문제점
  • 부모 컴포넌트가 리렌더링되면 ItemList도 리렌더 되며, filterItems가 매번 호출돼 성능 저하 유발
• useMemo 적용
  • [items, query]가 변경되지 않으면 이전 filtered 배열을 재사용
  • 콘솔에 Filter running…이 찍히는 횟수가 줄어듦

3. 언제 사용해야 할까?