React 성능 최적화 - 렌더링 최소화와 메모이제이션 전략

React 애플리케이션의 성능을 개선하려면 불필요한 렌더링을 줄이고, 비용이 큰 계산을 메모이제이션하는 것이 핵심입니다.
이 글에서는 실무에서 자주 사용하는 성능 최적화 기법들을 정리합니다.

---

1. React.memo로 컴포넌트 메모이제이션

const ExpensiveComponent = React.memo(({ data }: { data: Data }) => {
  return <div>{/* 무거운 렌더링 */}</div>;
}, (prevProps, nextProps) => {
  // 커스텀 비교 함수 (선택적)
  return prevProps.data.id === nextProps.data.id;
});

• props가 변경되지 않으면 리렌더링을 건너뜁니다.
• 얕은 비교(shallow comparison)를 기본으로 사용하지만, 커스텀 비교 함수도 제공 가능합니다.

---

2. useMemo와 useCallback 활용

function ProductList({ items, filter }: Props) {
  // 비싼 필터링 계산을 메모이제이션
  const filteredItems = useMemo(
    () => items.filter((item) => item.category === filter),
    [items, filter]
  );

  // 자식 컴포넌트에 전달하는 함수를 메모이제이션
  const handleClick = useCallback((id: string) => {
    onItemClick(id);
  }, [onItemClick]);

  return (
    <>
      {filteredItems.map((item) => (
        
      ))}
    
  );
}