React 모범 사례은(는) 무엇을 하나요?
React 애플리케이션을 위한 포괄적인 성능 최적화 가이드입니다. 7개 카테고리, 우선순위별로 정리된 37개의 규칙을 포함합니다.
우선순위별 규칙 카테고리
| 우선순위 | 카테고리 | 영향 | 접두사 |
|---|---|---|---|
| 1 | 폭포 현상 제거 | 치명적 | async- |
| 2 | 번들 크기 최적화 | 치명적 | bundle- |
| 3 | 클라이언트 측 데이터 가져오기 | 중간-높음 | client- |
| 4 | 리렌더링 최적화 | 중간 | rerender- |
| 5 | 렌더링 성능 | 중간 | rendering- |
| 6 | JavaScript 성능 | 낮음-중간 | js- |
| 7 | 고급 패턴 | 낮음 | advanced- |
빠른 참조
1. 폭포 현상 제거 (치명적)
async-defer-await- await을 실제로 사용되는 분기로 이동async-parallel- 독립적인 작업에는 Promise.all()/allSettled() 사용
2. 번들 크기 최적화 (치명적)
bundle-dynamic-imports- 무거운 컴포넌트에 React.lazy() 사용bundle-defer-third-party- 분석/로깅을 필요할 때 로드bundle-conditional- 기능이 활성화된 경우에만 모듈 로드bundle-preload- 호버/포커스 시 사전 로드하여 인지 속도 향상
3. 클라이언트 측 데이터 가져오기 (중간-높음)
client-query-dedup- TanStack Query를 사용한 자동 요청 중복 제거client-event-listeners- 전역 이벤트 리스너 중복 제거client-passive-event-listeners- 스크롤 성능을 위해 수동 리스너 사용client-localstorage-schema- localStorage 데이터 버전 관리 및 최소화
4. 리렌더링 최적화 (중간)
rerender-defer-reads- 콜백에서만 사용하는 상태를 구독하지 않음rerender-memo- 무거운 작업을 메모화된 컴포넌트로 분리rerender-dependencies- Effect에서 기본형 의존성 사용rerender-derived-state- 원시값이 아닌 파생된 불리언을 구독rerender-functional-setstate- 안정적인 콜백을 위해 함수형 setState 사용rerender-lazy-state-init- 값비싼 초기값에는 useState에 함수 전달rerender-transitions- 긴급하지 않은 업데이트에는 startTransition 사용
5. 렌더링 성능 (중간)
rendering-animate-svg-wrapper- SVG 요소 대신 div 래퍼에 애니메이션 적용rendering-content-visibility- 긴 목록에 content-visibility 사용rendering-hoist-jsx- 정적 JSX를 컴포넌트 외부로 추출rendering-svg-precision- SVG 좌표 정밀도 감소rendering-activity- 표시/숨김에 Activity 컴포넌트 사용rendering-conditional-render- 조건부 렌더링에 && 대신 삼항 연산자 사용
6. JavaScript 성능 (낮음-중간)
js-batch-dom-css- 클래스 또는 cssText를 통해 CSS 변경 그룹화js-index-maps- 반복 조회에 Map 구축js-cache-property-access- 루프에서 객체 속성 캐싱js-cache-function-results- 함수 결과를 모듈 수준 Map에 캐싱js-cache-storage- localStorage/sessionStorage 읽기 캐싱js-combine-iterations- 여러 filter/map을 하나의 루프로 결합js-length-check-first- 비용이 큰 비교 전에 배열 길이 확인js-early-exit- 함수에서 조기 반환js-hoist-regexp- RegExp 생성을 루프 외부로 호이스트js-min-max-loop- sort 대신 루프로 최소/최대값 찾기js-set-map-lookups- O(1) 조회를 위해 Set/Map 사용js-tosorted-immutable- 불변성을 위해 toSorted() 사용
7. 고급 패턴 (낮음)
advanced-event-handler-refs- 이벤트 핸들러를 ref에 저장advanced-use-latest- 안정적인 콜백 ref를 위해 useLatest 사용
사용 방법
references/ 디렉토리의 각 규칙 파일에는 설명, 올바르지 않은/올바른 코드 예제 및 컨텍스트가 포함되어 있습니다. 필요에 따라 개별 파일을 읽으십시오.