썸네일 출처: nextui - issues

3줄요약:
1. 정의: Hydration은 정적인 HTML을 동적이게 변경하게 하는 과정
2. 원인: pre-render된 리액트 트리와 첫 렌더링(Hydration)이 된 리액트 트리 간의 차이로 발생
3. 해결: 변경되는 값을 상태로 관리하고 조건에 따라 useEffect로 해결

Hyrdation의 이름 유래?

Hydration을 사전적으로 찾아보면 "수화"이다. 영어로 보면 "the process of causing something to absorb water"이라고 나온다. 즉, 물을 흡수한다는 표현이다.
근데 왜 이런 생물학적 또는 화학적 표현이 굳이 Web에서 사용이 되는 것일까?

서버가 보내는 정적 HTML을 영어로 Static HTML이라고 한다. 즉 상호작용이 없는 상태이다.
이런 것을 "건조"하다라고 표현이 가능할 것이다.
왜? 우리가 사람이든 물건이든 건조하다고 표현할 때 무언가 딱딱하거나 부족하다고 생각할 수 있다.
그럼 영문권에서는? 일부러 Urban Dictionary에서 조회를 했고 아래와 같이 무언가 부족하다라는 느낌을 받는 것을 알 수 가 있다.

출처: Urban Dictionay

그러면 StatiC HTML이 DRY한가? 즉, 무언가 부족한가?
상호작용이 없다.

즉 정적인 HTML에다가 상호작용이 가능한 JS를 넣어줌으로써 우리는 부족한 것을 채워 넣는 행위가 진행되었다.
그래서 정적인 HTML을 동적이게 변경하게 하는 이 과정을 Hydration이라고 이름을 붙여 놓은 것을 언어의 의미로 유추할 수 있다.

Hydration Error?

이 에러가 나타나면 누구나 아래와 같이 에러가 보일 것이다.

그림출처: nextui - issues

참 친절하게 이 링크로 가보라고 에러 해결 방법과 일어난 사유를 알려준다.

원인

출처: React Hydration Error

"pre-render된 리액트 트리와 첫 렌더링(Hydration)이 된 리액트 트리 간의 차이"로 인해 발생한다고 한다.
즉, 서버가 준 HTML과 Hydration이 된 이후 표시되는 HTML간의 차이가 보여서 예상하지 못한 컨텐츠나 속성이 보여질 수 있다고 한다.
(This can cause the React tree to be out of sync with the DOM and result in unexpected content/attributes being present.)

해결

상태로 관리하고 조건에 따라 useEffect로 해결하면된다. 코드 출처: React Hydration Error

function MyComponent() {
  const color = typeof window !== 'undefined' ? 'red' : 'blue'
  
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

import { useEffect, useState } from 'react'

function MyComponent() {
  const [color, setColor] = useState('blue')
  useEffect(() => setColor('red'), [])
 
  return <h1 className={`title ${color}`}>Hello World!</h1>
}

나의 후기

Next를 처음쓰면서 React에서 항상 사용하던 방법으로 작성 시 에러가 날 수도 있다라는 것을 알 수 있었다. 어떤 조건에 따라 변경되는 것을 고려할 때 바로 값이 아닌 상태로 관리하는 것이 안전하다고 생각된다
개발 당시 깃허브 Log