- Vercel이 React와 Next.js의 10년 이상 성능 최적화 경험을 기반으로 한 구조화된 저장소
React-Best-Practices를 공개함
- 이 저장소는 AI 에이전트와 LLM이 코드 리뷰나 리팩터링 시 일관된 최적화 결정을 내릴 수 있도록 설계됨
- 핵심은 워터폴 제거와 번들 크기 축소를 우선순위로 두고, 서버·클라이언트·렌더링 성능까지 8개 범주로 구성
- 각 규칙은 중요도 등급(CRITICAL~LOW) 과 함께 잘못된 코드 예시 및 수정 예시를 포함
- 실제 프로덕션 사례에서 검증된 규칙으로, 코딩 에이전트 통합을 통한 자동 최적화 지원이 가능함
React Best Practices 개요
-
react-best-practices는 React와 Next.js의 10년 이상 축적된 최적화 지식을 집약한 저장소
- AI 에이전트와 LLM이 코드 분석 및 개선 제안 시 참고할 수 있도록 구조화됨
- React 성능 문제는 종종 릴리스 후 느려진 증상에 대응하는 형태로 발생
- 비동기 작업의 순차 실행, 커지는 클라이언트 번들, 불필요한 리렌더링이 주요 원인으로 지적됨
- 이러한 문제는 모든 사용자 세션에 반복 비용을 발생시키는 구조적 병목으로 작용
핵심 아이디어: 우선순위 기반 최적화
- 대부분의 성능 개선 시도가 스택의 하위 레벨에서 시작해 실패하는 경우가 많음
- 예를 들어, 요청 워터폴이 600ms를 추가하면
useMemo 최적화는 의미가 없음
- 페이지마다 300KB의 불필요한 자바스크립트를 전송하면 미세한 루프 최적화는 효과가 없음
- 프레임워크는 두 가지 핵심 조치로 시작
- 워터폴 제거
- 번들 크기 축소
- 이후 서버 성능, 클라이언트 데이터 패칭, 리렌더링 최적화 순으로 확장
- 총 8개 카테고리, 40개 이상의 규칙이 중요도 순으로 정렬되어 있음
- CRITICAL 단계는 워터폴 제거와 번들 축소, LOW 단계는 고급 패턴
포함된 주요 카테고리
- 저장소는 다음 8가지 성능 영역을 다룸
- 비동기 워터폴 제거
- 번들 크기 최적화
- 서버 성능
- 클라이언트 데이터 패칭
- 리렌더링 최적화
- 렌더링 성능
- 고급 패턴
- 자바스크립트 성능
- 각 규칙은 영향 등급(CRITICAL~LOW) 과 함께 잘못된 코드 및 수정 예시를 제공
- 예시: 불필요한
await 호출로 모든 분기에서 데이터를 기다리는 코드 → 조건문 순서를 바꿔 필요할 때만 대기하도록 수정
- 모든 규칙 파일은
AGENTS.md로 컴파일되어, AI 에이전트가 코드 리뷰 시 직접 참조 가능
실제 사례 기반의 규칙 수집
- 모든 규칙은 실제 프로덕션 코드베이스에서의 성능 개선 경험을 기반으로 함
-
루프 통합: 메시지 리스트를 8번 스캔하던 코드를 한 번으로 줄여 대규모 데이터 처리 효율 향상
-
비동기 병렬화: 의존성이 없는 DB 호출을 병렬 실행해 전체 대기 시간 절반으로 단축
-
폰트 폴백 조정: 시스템 폰트 사용 시 자간을 조정해 폴백 상태에서도 자연스러운 표시 유지
코딩 에이전트 통합
-
react-best-practices는 Agent Skills 패키지로 제공되어 다양한 코딩 에이전트에 설치 가능
- Opencode, Codex, Claude Code, Cursor 등에서 사용 가능
- 에이전트가 중첩된
useEffect 호출이나 무거운 클라이언트 임포트를 감지하면, 해당 규칙을 참고해 수정 제안 가능
- 설치 명령어:
npx add-skill vercel-labs/agent-skills
- 전체 리포지토리는 GitHub의
react-best-practices에서 확인 가능