React Best Practices

Vercel Labs에서 10년 이상 React와 Next.js 의 최적화한 경험을 react-best-practices라는 저장소에 정리했다.
이 저장소는 단순한 팁 모음이 아니라, AI 이에전트와 LLM이 이해하고 활용할 수 있도록 설계된 성능 최적화이다.

나는 이것을 사용하기 전에 어떤식으로 진행했는지 파악해보고자 한다.

🔗 Introducing: React Best Practices

Vercel 문서 내용

Vercel에서 제공하는 문서에 따르면, React 성능 개선 작업은 대부분 문제가 발생한 뒤에야 시작된다.
배포 이후 느려졌다는 피드백이 오고, 그때부터 원인을 쫓기 시작하는 방식이다.
이 과정은 비용이 크고, 잘못된 부분을 최적화할 가능성도 높다.

실제 프로덕션 코드를 오랫동안 관찰해보면, 성능 저하의 원인은 반복해서 나타난다.

• 비동기 작업이 의도치 않게 순차적으로 실행되는 문제이다.
• 시간이 지날수록 커지는 클라이언트 번들 크기이다.
• 필요 이상으로 자주 리렌더링되는 컴포넌트이다.

이 문제들은 미세한 최적화가 아니라, 모든 사용자 세션에 반복적으로 비용을 발생시키는 구조적인 문제이다. 대기 시간, UI 끊김, 누적 성능 부채로 이어지는 핵심 원인이다.

그래서 Vercel이 이번에 발표한 것은 어디부터 고쳐야 하는가를 명확히 하는 데 초점을 맞추고 있다.

순서 중요성

많은 성능 최적화가 실패하는 이유는 너무 아래 레벨부터 시작하기 때문이다.

요청 워터폴로 인해 600ms가 추가로 대기되고 있다면, useMemo를 아무리 최적화해도 의미가 없다.

모든 페이지에서 300KB의 불필요한 자바스크립트를 내려받고 있다면, 루프 하나를 줄이는 것은 체감 성능에 영향을 주지 못한다.

성능 문제는 누적된다.
오늘 추가한 작은 비효율 하나가, 해결되기 전까지 모든 사용자에게 계속 비용을 부과한다.

그래서 react-best-practices는 가장 먼저 실제 지표에 영향을 주는 작업부터 다룬다. 그 다음에 서버 성능, 클라이언트 데이터 패칭, 리렌더링 최적화로 내려간다.

저장소에 포함된 내용

react-best-practices는 다음 8가지 성능 영역을 다룬다.

• 비동기 워터폴 제거
• 번들 사이즈 최적화
• 서버 사이드 성능
• 클라이언트 데이터 패칭
• 리렌더링 최적화
• 렌더링 성능
• 고급 패턴
• 자바스크립트 성능

각 규칙에는 우선순위를 판단할 수 있는 영향도와 함께, 잘못된 코드와 개선된 코드 예시가 포함되어 있다.

코딩 에이전트와 함께 사용하는 방법

react-best-practices는 단순한 문서가 아니라 에이전트 스킬 형태로도 제공된다.
Opencode, Codex, Claude Code, Cursor 같은 코딩 에이전트가 코드 리뷰나 리팩터링 시 이 규칙을 참조할 수 있다.

에이전트가 useEffect 워터폴이나 과도한 클라이언트 import를 발견하면, 해당 패턴을 근거로 개선안을 제안할 수 있다.

npx add-skill vercel-labs/agent-skills

React 성능 최적화를 반응적인 작업이 아니라, 구조적으로 관리하기 위한 기준점이다.