Hydrate, Hydration이 무엇일까? 🤔

수정·2023년 8월 29일

목록 보기

2/4

오늘은 지난 게시글에서 언급했던, 대답하지 못한 면접 질문 중 하나인 Hydrate에 대해 정리할 예정이다.

👨🏻‍💻 "Hydrate가 무엇인지 아시나요?"

듣자마자 '아 뭔가 단어는 많이 들어봤는데 어디서 봤더라...?'라는 생각에 잠겨버렸다.
이 질문에 대한 대답은 못했지만, 집 가서 바로 정리해보고자 하는 생각으로 가득했다!

❌ Hydration failed 어쩌구저쩌구 ... on the server ❌

"🙀 Next에서 위 에러사항이 났을 때 봤던 hydration이 해당 질문의 hydrate었구나..!"
라며 놀라게 되었다 .. ㅎㅎ

Hydrate 개념을 정리해보며, 까먹지 않도록 머릿속에 넣어보고자 한다.

참고: React 공식 블로그, Next와 Hydration 에러

부족한 부분에 대한 보충설명 댓글은 언제나 환영입니다! ✨

💜 React와 Next의 웹페이지 구성

Hydrate 개념을 알아보고 가기 전, React와 Next가 웹페이지를 띄우게 되는 동작 원리를 먼저 이해하고 가보자!

React

리액트는 우선 정적 리소스 파일과 JS를 클라이언트 단으로 가져와 JS로 페이지를 렌더링 한다.
➡️ 프로젝트를 빌드하게 되면, build 폴더에 JS로만 구성된 파일들이 생기는 것을 볼 수 있을 것이다.

리액트의 파일 구성을 살펴보면,

├── 📂 public
│   └── 📝 index.html
│
├── 📂 src
│   └── 📝 App.tsx, index.tsx,

이렇게 public/index.html에서는 아래와 같이 id="root"의 DOM을 불러오고 있고 이외의 HTML 코드를 찾아볼 수는 없다.

<div id="root"></div>

그리고 src/index.tsx에서 root 이름을 가진 DOM을 불러와 자바스크립트 코드로 문서화를 하며 페이지를 그려나가기 시작하는 것이다.

CSR과 SSR의 렌더링 차이를 한 번씩 학습해본 사람이라면, Next의 웹 페이지 구성 원리는 금방 알 수 있을 것이라 생각한다.

Next는 클라이언트로 보내기 전에 서버 단에서 미리 템플릿을 만들어서 보내준다는 특징을 가지고 있다.
그러나, 이건 HTML 템플릿일 뿐 아직 필요한 JS의 동적 코드가 추가되지 않았음을 기억하자!

이제 JS로 만든 동적인 코드들은 HTML 템플릿이 넘어온 후, 본인들의 역할을 수행하기 위한 자리를 렌더링 후 잡아가며 Next에서의 웹페이지가 그려지기 시작한다.

💜 그럼 Hydrate가 정확히 뭐지?!

바로 위에서 정리한 Next의 웹페이지 구성 원리 중 마지막 부분을 함께 살펴보자.

1. 서버에서 미리 렌더링되어 만들어진 HTML 템플릿이 클라이언트 측으로 넘어온다.
2. 그러나 동적인 요소들이 적용되어 있지 않은 빈 껍데기의 HTML일 뿐!
3. 필요한 JS 코드 요소들은 렌더링되며 클라이언트 측으로 넘어온 HTML 요소에서 자기 위치를 찾아 적용된다.

이렇게 JS 요소들이 제자리를 찾아가는 과정 자체가 Hydrate라고 이해하면 편할 것 같다.

즉, 단어 자체에 대해 정리하자면 렌더링 된 정적 페이지와 번들링된 JS 파일을 클라이언트 단으로 보내서 HTML, JS를 매칭시키는 과정을 의미한다!