---

useMemo

• 반환 값을 캐싱하여 불필요한 계산을 방지(성능 최적화)하는데 사용.
• useMemo는 이전에 계산된 값을 저장하고, [deps; dependence(의존값)]이 변경되지 않으면 캐시된 값을 재사용.
• useMemo(() => (), [deps]).
• a와 b가 변경될 때만 computeExpensiveValue() 실행(연산).

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 성능 최적화를 위해 항상 사용하기 보다 필요한 경우에만 사용하는 것이 좋음.

언제 사용해야 할까?

무거운 함수를 사용할 때

• 배열을 필터링 하거나 정렬하는 함수.

const sortedList = useMemo(() => list.sort((a, b) => a - b), [list]);

Props의 변경시 컴포넌트 렌더링이 발생할 때

function MyComponent({ data }) {
  const processedData = useMemo(() => processData(data), [data]);
  return <div>{processedData}</div>;
}

자식 컴포넌트에 넘겨주는 함수

• 자식 컴포넌트에 넘겨주는 함수가 매번 새로 생성되는 것은 비효율적임.

function MyComponent({ onClick }) {
  const handleClick = useMemo(() => onClick, [onClick]);
  return <button onClick={handleClick}>Click me</button>;
}

---