vercel-react-best-practices

Vercel React Best Practices

Vercel Engineering의 React/Next.js 성능 최적화 가이드입니다.

개요

Version 1.0.0 | Vercel Engineering | January 2026

이 스킬은 AI 에이전트와 LLM이 React/Next.js 코드베이스를 유지보수, 생성, 리팩토링할 때 따라야 할 종합 성능 최적화 가이드입니다.

영향도별 카테고리

Quick Reference

CRITICAL 이슈 (즉시 수정 필요)

1. Waterfall 제거

// ❌ 잘못된 예: sequential await
const user = await fetchUser()
const posts = await fetchPosts()

// ✅ 올바른 예: parallel execution
const [user, posts] = await Promise.all([
  fetchUser(),
  fetchPosts()
])

2. Barrel File 피하기

// ❌ 잘못된 예: 전체 라이브러리 import
import { Check, X } from 'lucide-react'

// ✅ 올바른 예: 직접 import
import Check from 'lucide-react/dist/esm/icons/check'
import X from 'lucide-react/dist/esm/icons/x'

HIGH 이슈

서버 컴포넌트 직렬화 최소화

// ❌ 잘못된 예: 모든 필드 전달
<Profile user={user} />  // 50개 필드

// ✅ 올바른 예: 필요한 필드만 전달
<Profile name={user.name} />  // 1개 필드

MEDIUM 이슈

함수형 setState 사용

// ❌ 잘못된 예: stale closure 위험
setItems([...items, newItem])

// ✅ 올바른 예: 안전한 업데이트
setItems(curr => [...curr, newItem])

사용법

코드 리뷰 시

/check --react [파일경로]

성능 분석 시

/check --react --perf

전체 검사

/check --all

상세 규칙

전체 규칙은 AGENTS.md를 참조하세요:

• 8개 카테고리의 상세 설명
• 49개 규칙의 잘못된 예 / 올바른 예
• 영향도 및 최적화 효과

관련 리소스

• React 공식 문서
• Next.js 공식 문서
• SWR
• better-all
• Vercel 성능 블로그

에이전트 연동

이 스킬은 다음 에이전트와 자동 연동됩니다:

Source: Vercel Labs Agent Skills