React·Next.js 성능 최적화를 위한 react-performance
機械翻訳 / Machine-translated
cccskills
21時間前・10分で読める
機械翻訳 / Machine-translated
원문: React・Next.jsの高速化を進めるreact-performance（cccskills）
스킬 페이지: react-performance
이 글의 결론
React·Next.js로 개발하고 있다면 react-performance를 도입하면 페이지가 느린 원인을 AI 에이전트와 함께 점검할 수 있게 됩니다.
점검 순서는 데이터 취득 대기 시간, 전달하는 코드량, 리렌더링입니다.
이 글에서는 스킬이 다루는 8가지 분야와 설치 방법, 요청 문구 예시, 사용 시 주의사항을 순서대로 소개합니다.
느린 원인을 영향이 큰 분야부터 순서대로 에이전트에게 조사하도록 할 수 있습니다.
예를 들어 다음과 같이 요청합니다.
이 페이지의 초기 표시가 느립니다.
원인을 우선순위가 높은 순서대로 조사하고, 수정 방법을 제안해주세요.
에이전트가 가장 먼저 확인하는 것은 데이터 취득 대기 시간입니다.
서로 의존하지 않는 await가 순서대로 나열되어 있으면 Promise.all로 병렬 실행하는 형태로 수정합니다.
Server Component 안에서 연속으로 기다리는 처리에는 자식 컴포넌트로 분리하여 병렬로 실행하는 방안을 제시합니다.
다음으로 확인하는 것은 초기에 전달하는 JavaScript의 양입니다.
수정 후보는 배럴 파일(index.ts에서 모아서 내보내는 형태)의 import를 개별 import로 변경하는 것이나, 무거운 컴포넌트를 next/dynamic으로 나중에 로드하는 것입니다.
분석 도구 등 외부 스크립트는 next/script로 표시 이후에 실행하도록 미룹니다.
리렌더링이나 세부적인 처리 속도는 그 이후에 확인합니다.
react-performance는 70개 이상의 개선 규칙을 8가지 분야로 나누고 우선순위 순으로 정렬한 참조표를 에이전트에게 제공하는 스킬입니다.
Vercel Labs가 공개한 react-best-practices를 기반으로 합니다.
| 우선순위 | 분야 | 주요 대상 |
|---|---|---|
| 1（최우선） | 데이터 취득 대기 해소 | 독립된 await가 이어지는 부분 |
| 2（최우선） | 전달 코드량 감소 | 초기 로드 JavaScript, 외부 라이브러리 |
| 3（높음） | 서버 측 처리 | Server Components, Server Actions, API 라우트 |
| 4（중~높음） | 브라우저 측 데이터 취득 | SWR, TanStack Query, 훅 내부의 fetch |
| 5（중간） | 리렌더링 감소 | 빈번한 상태 업데이트, 부모에서 자식으로의 연쇄 |
| 6（중간） | 렌더링 속도 | 긴 목록, 애니메이션, hydration |
| 7（낮음~중간） | JavaScript 처리 | 무거운 루프, 빈번한 메모리 할당 |
| 8（낮음） | 응용 패턴 | 안정적인 참조, effect와 이벤트 연동 |
데이터 취득 대기가 최우선인 이유는, 순서대로 기다리는 await가 매번 통신 대기 시간을 그대로 누적시키기 때문입니다.
세부적인 코드 작성 방식보다 먼저 대기 시간과 전달량을 해결하는 것이 이 스킬의 접근 방식입니다.
Lighthouse나 Web Vitals 지표별로 확인해야 할 분야를 제시하는 대응표도 포함되어 있습니다.
지표 수치가 나쁠 때 어느 분야부터 확인해야 할지를 에이전트가 판단하기 위한 표입니다.
| 지표 | 주로 확인할 분야 |
|---|---|
| LCP（가장 큰 요소가 표시될 때까지의 시간） | 데이터 취득 대기, 전달 코드량, 리소스 프리로드 |
| INP（조작부터 다음 렌더링까지의 시간） | 리렌더링, 렌더링 속도, JavaScript 처리 |
| CLS（레이아웃 이동） | 렌더링 속도（Suspense 배치, 이미지 크기） |
| TBT（메인 스레드가 멈추는 총 시간） | 전달 코드량, JavaScript 처리, 외부 스크립트 지연 |
리뷰 관점도 포함되어 있습니다.
"use server"를 붙인 함수는 외부에서 호출 가능한 진입점이 되므로, 함수 내부에서 인증과 권한 확인을 수행하도록 에이전트가 지적합니다.
서버 모듈 변수에 상태를 저장하면 사용자 간에 공유되어 버리는 문제도 확인 대상입니다.
설치는 커맨드로 하는 방법과 에이전트에게 부탁하는 방법이 있습니다.
커맨드는 다음과 같으며, 실행 시 Claude Code나 Codex 등 설치할 에이전트를 선택할 수 있습니다.
npx skills add https://github.com/affaan-m/ECC --skill react-performance
에이전트에게 부탁하는 경우 다음 문구를 그대로 전송해주세요.
次の Agent Skill をインストールしてください。
https://github.com/affaan-m/ECC/tree/main/skills/react-performance
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/react-performance/、Codex なら ~/.agents/skills/react-performance/ に配置してください。
저장 위치는 모든 프로젝트에서 사용할지, 특정 프로젝트에서만 사용할지에 따라 달라집니다.
| 에이전트 | 모든 프로젝트에서 사용 | 특정 프로젝트에서만 사용 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | 프로젝트의 .claude/skills/ |
| Codex | ~/.agents/skills/ | 프로젝트의 .agents/skills/ |
요청 문구에 조사하고 싶은 분야를 명확하게 적으면 조사 범위를 좁힐 수 있습니다.
대표적인 예시 3가지를 소개합니다.
이 페이지에서 데이터 취득을 순서대로 기다리는 부분을 찾아서 병렬로 수정해주세요.
독립된 취득 처리는 Promise.all로 묶을 수 있습니다.
데이터를 사용하는 분기 안까지 await를 늦추는 수정도 대상입니다.
props 유무처럼 로컬에서 판단할 수 있는 조건은 통신 전에 확인하도록 순서를 바꿉니다.
초기 로드 JavaScript량을 줄일 수 있는 부분을 찾아주세요.
후보로 거론되는 것은 배럴 파일을 통한 import와, 무거운 차트 컴포넌트처럼 나중에 로드할 수 있는 컴포넌트입니다.
관리자만 사용하는 화면처럼 조건부로 로드할 수 있는 모듈도 대상이 됩니다.
전달량을 눈으로 확인하는 수단으로 @next/bundle-analyzer도 안내됩니다.
이 PR을 성능 관점에서 리뷰해주세요.
불필요한 리렌더링도 확인해주세요.
먼저 지적되는 것은 콜백 안에서만 사용하는 값을 구독하고 있는 부분입니다.
렌더링 중에 계산할 수 있는 값을 useEffect로 만들고 있는 부분이나, 컴포넌트 안에서 다른 컴포넌트를 정의하고 있는 부분도 대상이 됩니다.
Server Actions에 인증이 포함되어 있는지도 함께 확인됩니다.
이 스킬은 개선의 지침이며 측정 도구가 아닙니다.
수정 전후에 Lighthouse 등으로 실제 수치를 측정하여 효과를 확인하세요.
수정을 적용할지 여부는 실제 코드와 측정 결과를 보고 판단합니다.
대상은 React 18/19와 Next.js이며, 기능에 따라 필요한 버전이 다릅니다.
응답을 반환한 후에 처리를 실행하는 after()는 Next.js 15, 표시와 비표시를 전환하는 <Activity>는 React 19의 기능입니다.
배럴 파일 최적화를 자동으로 수행하는 설정은 Next.js 13.5 이상에서 사용할 수 있습니다.
React Compiler를 도입한 프로젝트에서는 리렌더링을 수동으로 억제하는 규칙을 리뷰 시 확인에만 사용하는 방침입니다.
useMemo나 useCallback을 직접 추가하는 작업은 컴파일러에 맡기는 방식입니다.
포함된 파일은 SKILL.md뿐이며 스크립트는 포함되어 있지 않습니다.
SKILL.md의 관련 항목에는 react-reviewer 등의 에이전트나 커맨드가 등장하지만, 이것들은 이 스킬에 포함되어 있지 않습니다.
라이선스는 MIT이며, 원본 자료도 MIT 라이선스입니다.
도입 전에 내용을 한 번 읽어보면 안심할 수 있습니다.
같은 리포지토리의 accessibility는 웹 등의 화면을 스크린 리더나 키보드 조작에 대응시키고 WCAG 2.2에 따라 점검하는 스킬입니다.
페이지 속도를 검토하는 동시에 사용성도 점검하고 싶을 때 함께 사용할 수 있습니다.
도움이 됩니다.
수동으로 리렌더링을 억제하는 규칙은 리뷰 시 확인에만 사용하게 되지만, 데이터 취득 대기나 전달 코드량 분야는 컴파일러의 대상이 아닙니다.
우선순위가 높은 분야는 그대로 사용할 수 있습니다.
대상은 React 18/19와 Next.js입니다.
리렌더링 감소나 긴 목록 렌더링 등 React 측 규칙도 많이 포함되어 있습니다.
next/dynamic이나 after()와 같은 Next.js 전용 항목은 Next.js를 사용하는 경우에 해당됩니다.
포함되어 있지 않습니다.
포함된 것은 SKILL.md뿐입니다.
Web Vitals의 각 지표와 확인해야 할 분야의 대응표가 있으므로, Lighthouse 등으로 측정한 결과를 보여주고 조사해달라는 방식으로 활용하는 것이 적합합니다.
react-performance는 React·Next.js의 느린 원인을 데이터 취득 대기, 전달 코드량, 리렌더링 순서로 점검하기 위한 지침을 에이전트에게 제공하는 스킬입니다.
8개 분야·70개 이상의 규칙이 우선순위 순으로 정렬되어 있어, 어디서부터 수정할지 고민할 필요가 없습니다.
PR 리뷰에서 성능이나 Server Actions의 인증을 확인하는 용도로도 사용할 수 있습니다.
도입은 cccskills 페이지에서 진행할 수 있습니다.
이 글은 cccskills의 읽을거리 「React・Next.jsの高速化を進めるreact-performance」의 전재입니다.
스킬의 상세 내용과 설치 방법은 cccskills의 react-performance 페이지에 있습니다.