React 프로젝트 성능 최적화 전략 – Lazy Loading, 코드 분할, 메모이제이션까지

React 프로젝트 성능 최적화 전략 – Lazy Loading, 코드 분할, 메모이제이션까지

---

React 앱을 개발하다 보면
기능은 많아지는데 앱이 느려지기 시작합니다.

"처음 페이지가 너무 무거워요"
"스크롤할 때 버벅임이 생겨요"
"페이지 간 이동이 부드럽지 않아요"

이런 문제를 해결하려면 성능 최적화 전략을 도입해야 합니다.
이번 글에서는 실무에서 바로 쓸 수 있는 React 최적화 기법들을
예제 중심으로 소개합니다.

---

✅ 1. 코드 분할(Code Splitting)이란?

React 앱은 기본적으로 하나의 큰 번들로 빌드됩니다.
하지만 초기 로딩 속도를 빠르게 하려면
필요한 페이지/컴포넌트만 로드하는 방식이 중요합니다.

---

🔹 React.lazy + Suspense로 Lazy Loading

import { Suspense, lazy } from "react";

const AboutPage = lazy(() => import("./pages/About"));

function App() {
  return (
    <Suspense fallback={<div>로딩 중...</div>}>
      <Routes>
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Suspense>
  );
}

✅ 페이지별로 코드를 분할하여 초기 로딩 속도 개선
✅ Suspense로 로딩 중 UI도 함께 처리 가능

---

🧠 Lazy Loading 최적화 포인트

위치 Lazy 적용 추천

페이지 컴포넌트	✅ 적극 추천
모달, 다이얼로그	✅ 조건부 렌더링 시 추천
자주 사용되는 버튼/폼	❌ 비추 (느려질 수 있음)

---

✅ 2. 이미지 지연 로딩 (lazy image loading)

<img src="..." loading="lazy" alt="썸네일" />

✅ HTML 속성 하나로 이미지도 늦게 불러오게 할 수 있음
✅ 무한스크롤/리스트 UI에서 성능 향상

---

✅ 3. 컴포넌트 메모이제이션

반응형

🔹 React.memo

const Item = React.memo(function Item({ value }) {
  return <li>{value}</li>;
});

✅ props가 바뀌지 않으면 불필요한 렌더링 방지

---

🔹 useMemo

const sortedList = useMemo(() => {
  return list.sort((a, b) => a.localeCompare(b));
}, [list]);

✅ 연산 비용이 큰 계산 결과를 메모리에 캐시

---

🔹 useCallback

const handleClick = useCallback(() => {
  console.log("클릭");
}, []);

✅ 함수를 같은 참조로 유지하여 자식 컴포넌트 불필요한 렌더링 방지

---

✅ 4. 리스트 최적화 – key와 가상화

• key는 고유값으로 설정해야 React가 효율적으로 diffing 가능
• 수천 개의 항목을 렌더링할 경우 → 가상화(virtualization) 적용

npm install react-window

import { FixedSizeList as List } from "react-window";

<List
  height={500}
  itemCount={10000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => <div style={style}>아이템 {index}</div>}
</List>

✅ 화면에 보이는 항목만 렌더링하여 성능 급상승

---

✅ 5. 번들 분석 도구로 병목 파악

npm install --save-dev source-map-explorer
npx source-map-explorer 'build/static/js/*.js'

✅ 어떤 파일이 번들을 많이 차지하는지 시각화
→ 필요 없는 라이브러리 제거
→ 코드 분할 대상 선정

---

🧠 오늘의 요약

전략 설명

React.lazy	페이지 단위 코드 분할
Suspense	로딩 중 fallback UI 제공
memo / useMemo / useCallback	불필요한 렌더링 방지
이미지 lazy	이미지 로딩 지연으로 속도 개선
리스트 가상화	많은 데이터 렌더링 시 최적화
번들 분석	앱 무게 줄이기 위한 사전 분석 도구

---

🧪 실습 과제

1. /about, /blog 페이지를 lazy loading으로 분리해보세요
2. 무거운 리스트 컴포넌트에 react-window를 적용해보세요
3. React.memo와 useCallback을 적용하여 불필요한 렌더링을 줄여보세요

---

📌 다음 글 예고

👉 React + Firebase 인증 구현하기 – 이메일 로그인부터 소셜 로그인까지

• Firebase 연동
• 이메일/비밀번호 로그인 구현
• Google, Github 로그인 연동

---

 

React 성능 최적화, 코드 분할, React lazy loading, React Suspense, 컴포넌트 메모이제이션, useMemo 사용법, react-window, 이미지 지연 로딩, 번들 사이즈 최적화, React 속도 개선 전략