react19-patterns
Installation
SKILL.md
React 19 패턴 가이드
이 프로젝트는 React 19를 사용합니다.
상세 예제와 코드는
docs/react19-guide.md참조
판단 기준표
| 상황 | React 19 패턴 | 이전 방식 (사용 금지) |
|---|---|---|
| ref 전달 | prop으로 직접 전달 | forwardRef |
| 단순 값/함수 | 그냥 사용 | useMemo/useCallback |
| 복잡한 계산 (O(n²)+) | useMemo ✅ |
- |
| 외부 라이브러리 객체 (Cesium, Three.js) | useMemo ✅ |
- |
| 수천 행 렌더링 컴포넌트 | memo ✅ |
- |
| 확실하지 않을 때 | 안 쓴다 | - |
| 폼 상태 관리 | useActionState + useFormStatus |
수동 state 관리 |
Related skills
More from pluxity/pf-frontend
cesium-expert
CesiumJS 3D 지도 전문가. "지도", "Cesium", "3D 맵", "GIS" 관련 질문 시 사용.
15streaming-expert
영상 스트리밍 전문가. "CCTV", "HLS", "WHEP", "스트리밍", "영상" 관련 질문 시 사용.
3pf-perf
성능 최적화 제안. "성능", "최적화", "느림", "번들" 관련 요청 시 사용.
2pf-a11y
접근성 검사. "접근성", "a11y", "ARIA", "키보드" 관련 요청 시 사용.
2pf-test-store
Zustand 스토어 테스트 생성. "스토어 테스트", "store 테스트" 요청 시 사용.
2pf-code-review
pf-frontend 프로젝트 컨벤션과 React 19 Best Practices 기반 코드 리뷰. "코드 리뷰", "리뷰해줘", "이 코드 괜찮아?" 요청 시 사용.
2