React디버깅hydration프런트엔드

프런트엔드 hydration·렌더 오류를 진단하는 프롬프트

개발자김철수22시간 전조회 0추천 0

변수 입력3개

ERROR

CODE

FRAMEWORK

변수를 채운 뒤 완성본을 복사하세요

언제 사용하나

SSR/CSR 환경에서 hydration 불일치, 깜빡임, 콘솔 경고가 발생할 때.

요청 전 확인

정확한 경고/오류 메시지와 문제 컴포넌트를 확인한다.
서버와 클라이언트에서 다르게 렌더되는 값(날짜, 랜덤, window)을 의심한다.

복사해서 쓰는 프롬프트

아래 hydration/렌더 오류를 진단해줘.

경고/오류: {{ERROR}}
관련 컴포넌트: {{CODE}}
프레임워크/렌더 방식: {{FRAMEWORK}}

원하는 출력:
1. 서버-클라이언트 출력이 갈리는 지점과 이유
2. 흔한 원인(비결정 값, 브라우저 전용 API, 잘못된 조건부 렌더) 점검
3. 올바른 수정안(effect로 이동, suppressHydrationWarning의 적절한 사용 등)
4. 재발을 막는 패턴

placeholder 설명

{{ERROR}} : hydration 경고/오류
{{CODE}} : 관련 컴포넌트
{{FRAMEWORK}} : 프레임워크/렌더 방식

입력 예시

{{ERROR}} = "Hydration failed because the initial UI does not match"

기대 결과

불일치 지점, 원인 점검, 올바른 수정안.

검증 방법

수정 후 콘솔 경고가 사라지고 깜빡임이 없는지 확인한다.

주의사항

경고를 억제만 하면 실제 불일치가 남는다.