피드로 돌아가기
Dev.toFrontend
원문 읽기
AI 코딩 어시스턴트용 .mdc 규칙으로 React 19 마이그레이션 함정 4가지 해결함
React 19 migration traps your AI keeps falling into (and how to fix them with .mdc rules)
AI 요약
Context
AI 코딩 어시스턴트는 React 18 패턴으로 훈련되어 있음. React 19 + Next.js 15 환경에서 컴파일은 정상이나 런타임에 실패하거나 예상치 못한 동작을 발생시킴.
Technical Solution
- useFormStatus: Button을 별도 자식 컴포넌트로 분리하여 form의 상태를 정확히 읽도록 함
- useActionState: react-dom에서 react로 import 경로 변경 및 API 이름 업데이트를 적용함
- forwardRef 제거: ref를 일반 prop으로 직접 전달하는 React 19 패턴으로 전환함
- async params: Next.js 15에서 params와 searchParams가 Promise 객체이므로 async/await 처리함
- .mdc rules: 파일 glob 기반 활성화로 AI 컨텍스트 창에 올바른 패턴을 주입함
Impact
29개 마이그레이션 패턴을 문서화함. React 19, Next.js 15, Supabase SSR, Stripe 패턴 포함함.
Key Takeaway
.mdc 규칙 파일은 AI의 오래된 훈련 데이터를 컨텍스트 창에서 효과적으로 무효화함.
실천 포인트
React 19 + Next.js 15 프로젝트에서 AI 생성 코드의 런타임 오류를 방지하려면 npx vibe-stack-rules init 명령어로 .mdc 규칙을 초기화하고, AI가 수정된 API와 비동기 패턴을 인식하도록 해야 함.