# React 모범 사례 (react-best-practices)

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

- 카테고리: [코드 규약](https://www.myskills.tools/ko/categories/code-standards/)
- 출처: 공식 · Vercel Labs
- 저장소: https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices (commit dc8367e · v1.0.0)
- SKILL.md: https://github.com/vercel-labs/agent-skills/blob/main/skills/react-best-practices/SKILL.md
- 설치 명령: `npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices`
- 라이선스: MIT
- 호환 도구: Any SKILL.md agent
- 권한: read-repo ✓, write-files ✓, shell ✗, network ✗
- 상태: 스캔 통과
- 규칙 스캔으로 모든 위험을 찾을 수는 없습니다. 설치 전에 이 스킬의 SKILL.md를 읽고 권한을 확인하세요.

## 핵심 규칙

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

## 실행 단계

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

## 권한 설명 (SKILL.md 기준)

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

## SKILL.md 프런트매터(YAML)

```yaml
---
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"
---
```

홈: https://www.myskills.tools/ko/ · URL: https://www.myskills.tools/ko/skills/react-best-practices/