Agent skill · software engineering · dalestudy
react
React 성능 최적화 및 베스트 프랙티스 스킬. Vercel Engineering 가이드 기반, 프레임워크 비종속. 다음 상황에서 사용: (1) React 컴포넌트(.tsx, .jsx) 작성 또는 수정 시, (2) 상태 관리, hooks, 리렌더링 최적화 작업 시, (3) 비동기 데이터 페칭 또는 Suspense 패턴 작업 시, (4) 번들 사이즈 최적화 또는 코드 스플리팅 시, (5) 'react', 'useState', 'useEffect', 'useMemo', 'useCallback', 'memo', 'Suspense', 'lazy' 키워드가 포함된 작업 시
Why this skill is useful
Adds specific performance optimization scripts and patterns for React that are not commonly known or documented.
What it needs
Requires react installed locally. About 3k tokens when loaded. Last updated 2026-04-07. 4 stars on the source repository.
What this skill does
React Vercel 가이드 기반 React 성능 최적화 베스트 프랙티스. 프레임워크 비종속(Next.js, Remix, Vite 등 무관). 각 규칙의 상세 설명과 코드 예제는 references/ 참고. 원본 Vercel 가이드의 전체 규칙(Next.js/SSR 포함)은 vercel-react-best-practices 참고. 규칙 카테고리 우선순위 카테고리 영향도 접두사 ---------- ---------- -------- -------- 1 비동기 워터폴 제거 CRITICAL async- 2 번들 사이즈 최적화 CRITICAL bundle- 3 리렌더링 최적화 MEDIUM rerender- 4 렌더링 성능 MEDIUM rendering- 5 클라이언트 데이터/이벤트 MEDIUM client- 6 JavaScript 성능 LOW-MEDIUM js- 7 고급 패턴 LOW advanced- 빠른 참조 1. 비동기 워터폴 제거 (CRITICAL) async-parallel - Promise.all()로 독립 작업 병렬화 async-defer-await - 불필요한 경로에서 await 지연 async-suspense-boundaries - Suspense로 부분 렌더링 async-dependencies - 부분 의존성 있는 작업의 최대 병렬화 2. 번들 사이즈 최적화 (CRITICAL) bundle-barrel-imports - barrel file 직접 import 지양 bundle-lazy - React.lazy로 코드 스플리팅 bundle-preload - hover/focus 시 프리로드 bundle-conditional - 기능 활성화 시에만 모듈 로드 bundle-defer-third-party - 비필수 서드파티 하이드레이션 후 로드 3. 리렌더링 최적화 (MEDIUM) rerender-functional-setstate - 함수형 setState로 안정적 콜백 rerender-lazy-state-init - 비용 큰 초기값 지연 초기화 rerender-derived-state - 파생 boolean 구독 rerender-dependencies - Effect 의존성 좁히기 rerender-memo - memo로 비용 큰 작업 분리 rerender-transitions - startTransition으로 UI 반응성 유지 rerender-ref-callbacks - ref callback으로 DOM 접근 (useRef+useEffect 대체) rerender-avoid-usestate - useState 대체 패턴 판단 가이드 rerender-url-state - URL 검색 매개변수로 상태 관리 rerender-form-libraries - 폼 라이브러리로 useState 제거 rerender-discriminated-union - discriminated union으로 불가능한 상태 방지 rerender-use-reducer - useReducer로 복잡한 상태 전이 rerender-derived-state-no-effect - 파생 상태를 렌더링 중 계산 rerender-defer-reads - 상태 읽기를 사용 시점으로 지연 rerender-memo-with-default-value - memo 컴포넌트 기본값 상수 추출 rerender-move-effect-to-event - 인터랙션 로직을 이벤트 핸들러로 이동 rerender-simple-expression-in-memo - 단순 표현식에 useMemo 사용 금지 rerender-use-ref-transient-values - 일시적 값에 useRef 사용 rerender-simplify-useeffect - useEffect를 커스텀 훅으로 단순화 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills dalestudy/react