react-best-practicescommit dc8367e · v1.0.0SKILL.md · 코드 규약

React 모범 사례

Vercel이 관리하는 React·Next.js 성능 최적화 가이드로, 8개 범주 70개 규칙을 영향도 순으로 정리했습니다.

npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices

권한: read-repo
write-files
shell
network
호환 도구: Any SKILL.md agent
GitHub: 33.3k
출처: 공식 · Vercel Labs
상태: 스캔 통과
라이선스: MIT
카테고리: 코드 규약
저장소: github.com/vercel-labs/agent-skills/skills/react-best-practices

핵심 규칙

규칙은 영향도 순으로 적용하며, 가장 중요한 요청 워터폴 제거와 번들 크기 축소부터 시작합니다.

실행 단계

01단계워터폴 제거
독립 작업은 Promise.all로 병렬화하고 await는 실제로 쓰는 분기로 옮기며 Suspense로 스트리밍합니다.
02단계번들 축소
barrel 파일 대신 직접 import하고, 무거운 컴포넌트는 next/dynamic으로 불러오며, 서드파티는 하이드레이션 이후 로드합니다.
03단계서버와 데이터 페칭
React.cache()와 LRU 캐시로 중복을 없애고 클라이언트 컴포넌트에 넘기는 데이터를 줄이며, 클라이언트에서는 SWR로 중복 요청을 제거합니다.
04단계렌더링과 JS 최적화
불필요한 재렌더링을 줄이고 렌더링과 JavaScript 핫패스를 최적화하며, 고급 패턴은 마지막에 고려합니다.
05단계규칙 파일 참조
자세한 내용은 rules/ 아래 파일에서 잘못된 예와 올바른 예를 보거나 전체를 모은 AGENTS.md를 참고합니다.

권한 설명 (SKILL.md 기준)

기능	필요 여부	설명
파일 쓰기	필요	규칙에 따라 React/Next.js 코드를 작성하거나 리팩터링합니다.
명령 실행	필요 없음	규칙 참고 자료이며 명령 실행을 요구하지 않습니다.
네트워크 송신	필요 없음	규칙 파일이 스킬에 포함되어 있어 네트워크가 필요하지 않습니다.

SKILL.md 프런트매터(YAML)commit dc8367e · v1.0.0

---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

핵심 규칙

실행 단계

01단계워터폴 제거

02단계번들 축소

03단계서버와 데이터 페칭

04단계렌더링과 JS 최적화

05단계규칙 파일 참조

권한 설명 (SKILL.md 기준)

SKILL.md 프런트매터(YAML)

관련 스킬