2. 공식문서

Nextjs 공식문서에는 hydration error의 원인으로 아래와 같은 내용을 지적했다.

1. 잘못된 HTML 태그 사용

   1. <p> 태그 내 <p> 태그 중첩

   2. <p> 태그 내 <div> 태그 중첩

   3. <p> 태그 내 <uㅣ> 태그나 <ol>중첩

2. typeof window !== 'undefined'과 같은 로직 사용

3. 렌더링 로직에서 window나 localStorage 같은 브라우저용 API 사용

4. 랜더링 로직에 Date() 같은 시간종속 API 사용

5. HTML을 수정하는 브라우저 확장 프로그램

6. 잘못된 CSS in JS 라이브러리

7. Cloudflare 자동 축소 와 같이 html 응답을 수정하려는 잘못 구성된 Edge/CDN

그런데 아무리 봐도 나는 여기에 해당하는 것이 아무것도 없었다.

그래서 처음부터 끝까지 디버그를 진행해보았다.

3. 디버그 과정

코드를 한줄씩 주석처리하고 저장하면서 어떤 부분이 오류를 내는지 찾아보았다.

어머, 이래서 dev 환경에서 개발하나봐.

그렇게 오류를 찾다가 Lunch component에서 오류가 발생하다는 사실을...

아라씀니다...

그래서 바로 Lunch로 들어가 또 하나씩 주석처리를 해보았다.

하다보니 이상하게 input 태그가 hydration failed의 원인이었다.

여러가지 방법으로 실험해 보았는데, scale-0, opacity-0 등, 요소를 숨기는 모둔 className이 오류를 일으켰다!

새로 바꾸려니 마음에 들지 않고 귀찮았다.

4. 해결방안

이런 쓸데없는 오류는 무시가 답이다.

별것도 아닌게 까불어

해당 요소에 suppressHydrationWarning 속성을 추가한다.

이렇게 하고 나니 오류가 뜨지 않는다.

5. 후기

나와 같은 경우는 없어서 한참을 헤멨다.

코딩을 독학하다 보니 때로는 간단한 문제도 엄청나게 돌아가는 경우가 많다.

글이 조금이라도 도움이 됬으면 한다.