# Vercel, React 모범 사례 저장소 공개

> Clean Markdown view of GeekNews topic #25869. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=25869](https://news.hada.io/topic?id=25869)
- GeekNews Markdown: [https://news.hada.io/topic/25869.md](https://news.hada.io/topic/25869.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2026-01-16T15:24:05+09:00
- Updated: 2026-01-16T15:24:05+09:00
- Original source: [vercel.com](https://vercel.com/blog/introducing-react-best-practices)
- Points: 28
- Comments: 2

## Summary

Vercel이 React와 Next.js의 10년간 축적된 **성능 최적화 노하우를 담은 `React-Best-Practices` 저장소**를 공개했습니다. 이 저장소는 **AI 에이전트와 LLM이 코드 리뷰나 리팩터링 시 일관된 판단을 내릴 수 있도록 구조화**되어 있으며, 워터폴 제거와 번들 크기 축소를 최우선 과제로 삼습니다. 실제 프로덕션 사례에서 검증된 40여 개 규칙이 중요도별로 정리되어 있어, 개발자와 코딩 에이전트 모두가 동일한 기준으로 성능 개선을 수행할 수 있습니다.

## Topic Body

- 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의 불필요한 자바스크립트를 전송하면 미세한 루프 최적화는 효과가 없음  
- 프레임워크는 **두 가지 핵심 조치**로 시작  
  1. 워터폴 제거  
  2. 번들 크기 축소  
- 이후 **서버 성능, 클라이언트 데이터 패칭, 리렌더링 최적화** 순으로 확장  
- 총 **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`](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices)에서 확인 가능

## Comments



### Comment 49360

- Author: ywc0008
- Created: 2026-01-17T03:13:37+09:00
- Points: 5

https://ywc.life/posts/vercel-react-best-practice   
전문 번역해봤습니다

### Comment 50130

- Author: honglu
- Created: 2026-01-28T18:57:31+09:00
- Points: 1
- Parent comment: 49360
- Depth: 1

고마워요! 잘 읽겠습니다.