그알것 — 그럼에도 알아야 할 것들
홈질문커뮤니티
로그인
그알것 — 그럼에도 알아야 할 것들

Service

  • 홈
  • 소개
  • 질문
  • 커뮤니티

My

  • 내 워크스페이스
  • 저장한 질문
  • 작성한 답변

Policy

  • 이용약관
  • 개인정보처리방침
  • 문의

© 2026 그알것 · What Still Matters

질문 목록Performance
Performance

리액트에서 성능 최적화를 위해 적용할 수 있는 방법들을 설명해주세요

실무4/5
설계4/5
인간4/5
기초1/5

면접관의 질문 의도

기법을 외워 나열하는 수준인지, 측정 결과를 보고 언제 어떤 기법을 쓸지 가르는 사람인지 본다.

큐레이션 답변

학습 자료

리액트 성능 최적화는 불필요한 재렌더링을 줄이고 초기 로드 비용을 낮추는 방향으로 간다. React.memo는 props가 동일할 때 컴포넌트 재렌더를 막고, useCallback/useMemo는 함수 재생성이나 비싼 계산 재실행을 줄인다. React.lazy와 Suspense 기반 코드 스플리팅은 필요한 시점에만 청크를 로드해 초기 번들 부담을 줄인다. 단 모든 최적화는 측정 없이 적용하면 복잡도만 키울 뿐 체감 속도는 그대로다.

좋은 답변 구조

  1. 01병목이 렌더 단계인지 번들/네트워크 단계인지 먼저 가른다
  2. 02React Profiler와 Performance 탭으로 측정 방식을 설명한다
  3. 03memo/useMemo/useCallback, 코드 스플리팅 같은 해결 전략을 우선순위로 제시한다
  4. 04각 기법이 더하는 복잡도와 디버깅 비용 같은 트레이드오프를 짚는다

자주 실수하는 포인트

측정 없이 모든 컴포넌트에 memo/useMemo를 남발한다
useCallback으로 함수 참조만 유지하고 자식이 React.memo가 아니라 효과가 없다
코드 스플리팅만 적용하고 로딩 스피너/스켈레톤 같은 UX는 그대로 둔다
렌더 병목과 네트워크 병목을 구분 못 해 엉뚱한 곳을 고친다

실무 맥락

  • 초기 번들이 커서 LCP가 늦는 SPA의 첫 화면 로딩 개선
  • 수백 행 리스트나 차트에서 입력마다 전체 리렌더가 도는 화면
  • 저사양 안드로이드에서 입력 지연이 체감되는 폼/검색 화면

본인 경험에 녹이는 힌트

Profiler로 가장 자주 리렌더되는 컴포넌트를 찾아 memo로 잘라낸 경험이 있다면 어떤 기준으로 후보를 골랐는지 연결할 수 있다

라우트 단위 코드 스플리팅으로 초기 번들을 줄여본 적이 있다면 청크 분리 기준과 로딩 UX 보완을 함께 말할 수 있다

최적화로 코드 복잡도가 늘었을 때 팀에 어떻게 가이드를 잡았는지가 답변 후크가 된다

커뮤니티 인기 답변

전체 0개

아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.

관련 꼬리 질문

Q1React.memo가 오히려 손해가 되는 경우는 언제인가요
Q2라우트 단위 코드 스플리팅 전략은 어떻게 세우나요
Q3성능 개선 효과를 어떤 지표로 검증하나요
아직 답을 쓰지 않았어요.
큐레이션 답변과 다른 사람 답변을 보고, 자기 언어로 답을 정리해보면 학습 효과가 가장 큽니다.
목차
  • 01면접관의 질문 의도
  • 02큐레이션 답변
  • 03좋은 답변 구조
  • 04자주 실수하는 포인트
  • 05실무 맥락
  • 06본인 경험에 녹이는 힌트
  • 07커뮤니티 인기 답변준비중
  • 08관련 꼬리 질문