React 성능 최적화

🚀 성능 최적화: memo, lazy, Suspense

React는 기본적으로 빠르지만, 컴포넌트의 재렌더링이 많아질수록 성능 저하가 발생할 수 있습니다. 이럴 때 유용한 도구가 바로 memo, lazy, Suspense입니다. 각 개념을 예제와 함께 살펴보겠습니다.

1. React.memo: 불필요한 리렌더링 방지

React.memo는 컴포넌트의 props가 변경되지 않으면 리렌더링을 막아줍니다.

const Child = React.memo(({ name }) => { console.log("Child render"); return <p>Hello, {name}</p>; });

👆 위 코드에서 name이 바뀌지 않으면 Child는 다시 렌더링 되지 않습니다.

2. React.lazy + Suspense: 코드 분할 (Code Splitting)

초기 로딩을 줄이기 위해 페이지/컴포넌트를 나눠서 로딩하는 방식입니다.

📦 예시 1: Lazy 로드

import React, { Suspense } from 'react'; const HeavyComponent = React.lazy(() => import('./HeavyComponent')); function App() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <HeavyComponent /> </Suspense> </div> ); }

• React.lazy: 동적으로 import하여 JS 파일을 분리
• Suspense: 로딩 중 보여줄 fallback UI 설정

3. 언제 사용하는가?

기법	사용 시점
React.memo	props 변경이 자주 없을 때, 렌더링 최적화
React.lazy	페이지나 대용량 컴포넌트를 나눠서 로드할 때
Suspense	lazy 컴포넌트 로딩, 데이터 패칭 대기 UI

🔍 팁: 성능 테스트 도구

• React DevTools의 Profiler 탭으로 리렌더링 확인
• Web Vitals 및 Lighthouse로 페이지 성능 측정

💬 React는 기본 성능도 훌륭하지만, 이런 최적화 기법을 적절히 활용하면 대규모 프로젝트에서도 훨씬 더 쾌적한 사용자 경험을 제공할 수 있습니다.