✅ 압박면접 대응 시리즈 12편: React 성능 최적화 기법 (메모이제이션, 코드 스플리팅, 가상 스크롤링)

✅ 압박면접 대응 시리즈 12편: React 성능 최적화 기법 (메모이제이션, 코드 스플리팅, 가상 스크롤링)

압박면접에서 자주 듣는 질문 중 하나가 바로
**“React 성능 최적화를 어떻게 했나요?”**입니다.
단순히 “useMemo 썼습니다” 수준이면 면접관은 바로 “구체적으로 어떤 상황에서? 성과는?”이라고 압박합니다.
따라서 성능 최적화 기법을 개념과 사례까지 명확히 준비해야 합니다.

---

📌 1. 메모이제이션 (Memoization)

✅ 핵심 개념

• 불필요한 연산/렌더링 방지를 위해 계산 결과를 캐싱

주요 도구

• React.memo: props가 바뀌지 않으면 컴포넌트 재렌더링 방지
• useMemo: 값 메모이제이션
• useCallback: 함수 메모이제이션

const ExpensiveList = React.memo(({ items }) => {
  return items.map(item => <div key={item.id}>{item.name}</div>);
});

📌 압박 포인트: 무분별한 메모이제이션은 오히려 메모리 낭비 → 꼭 필요한 경우만 적용

📌 실무 경험: 대시보드에서 대량 데이터 필터링 시 useMemo 적용 → 렌더링 시간 1.5s → 400ms 단축

---

📌 2. 코드 스플리팅 (Code Splitting)

✅ 핵심 개념

• 모든 코드를 한 번에 로드하지 않고, 필요한 시점에만 로드
• 초기 로딩 속도 개선

주요 도구

• React.lazy + Suspense
• Next.js dynamic import

const Chart = React.lazy(() => import("./Chart"));

<Suspense fallback={<div>Loading...</div>}>
  <Chart />
</Suspense>

📌 압박 포인트: 코드 스플리팅 후에도 중복 번들링이나 캐싱 전략까지 고려했는지 확인

📌 실무 경험: 관리자 페이지에서 chart.js를 코드 스플리팅 → 초기 로딩 속도 2.8s → 1.2s 개선

---

📌 3. 가상 스크롤링 (Virtualized List)

반응형

✅ 핵심 개념

• 화면에 보이는 DOM만 렌더링하고, 나머지는 가상화 처리
• 수천 개 리스트 렌더링 시 성능 저하 방지

주요 라이브러리

• react-window
• react-virtualized

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

<List
  height={400}
  itemCount={1000}
  itemSize={35}
  width={300}
>
  {({ index, style }) => <div style={style}>Row {index}</div>}
</List>

📌 압박 포인트: 단순히 “react-window 썼다”가 아니라,
스크롤 최적화와 이벤트 핸들링(무한 스크롤, Lazy Loading)까지 고려했는지 설명해야 함

📌 실무 경험: 상품 목록 5,000개를 CSR로 렌더링 → 브라우저 렉 발생
→ react-window 도입 후 FPS 안정화(30fps → 58fps)

---

📌 4. 압박면접 대응 전략

• 질문 예시:
  • “useMemo가 항상 성능을 개선하나요?”
  • “코드 스플리팅 후에도 성능이 개선되지 않는 경우는 언제인가요?”
  • “리스트 1만 개를 렌더링해야 한다면 어떤 접근을 하시겠습니까?”
• 답변 구조:
  1. 개념 정리
  2. 문제 상황 설명
  3. 적용 기법 & 근거
  4. 수치 기반 성과

---

📌 5. 면접장에서 활용할 한 줄 정리

“React 성능 최적화는 메모이제이션, 코드 스플리팅, 가상 스크롤링 같은 기법을 상황에 맞게 적용합니다.
저는 대량 데이터 필터링에 useMemo, 무거운 라이브러리에 코드 스플리팅, 리스트에 가상 스크롤링을 적용해 로딩 속도와 FPS를 크게 개선한 경험이 있습니다.”

---

압박면접,React,성능최적화,메모이제이션,코드스플리팅,가상스크롤링,ReactMemo,프론트엔드,면접준비,웹성능

---