React Hydrate는 무엇인가?
date
Apr 2, 2022
slug
6
status
Published
tags
Dev
React
summary
SSR에 관심이 있다면 보고 가시길 바랍니다
type
Post
속성
간단 정리
Server Side에서 보낸 정적 HTML파일을 클라이언트 단에서 JS코드들을 주어진 DOM요소에 맞게 매핑시키는 과정
어떻게 쓰이는가?
Next.js 프레임워크에 대해 어느정도 이해도가 있다고 생각하고 과정을 적어보도록 하겠습니다
- 클라이언트에서의 요청
- pre-rendering을 통한 정적 html파일 생성
- 클라이언트에 HTML 파일 전송
- 클라이언트에 자바스크립트 코드 전송 → 정적 html 파일에 대한 렌더링이 함께 일어남
- 자바스크립트 이벤트 핸들러가 HTML DOM 요소에 맞게 매칭(이 과정이 hydrate 이다)
- 각각의 매칭된 요소에 맞게 리액트가 컴포넌트를 관리함
리액트에서 제공한 hydrate라는 메소드는 기존 DOM트리에 해당되는 DOM 요소를 찾아 정해진 자바스크립트 속성을 부착시키는 방식으로 SSR이 가능하도록 해줍니다
그렇기 때문에 next.js에서는 클라이언트가 정적 html파일을 받아와 렌더링이 되었을 때 그 위에서 hydrate를 통해서 각 DOM 요소에 정해진 자바스크립트 속성들을 부착시킬 수 있도록 하여 SSR이 가능하도록 기능을 제공해준 것이죠
사실 저도 지금 알았다는게 조금 부끄럽지만 리액트 18버전을 보는 도중에 처음알게 되서 정리해보고자 글을 이렇게 쓰게 되었습니다 더 자세하게 알고 싶다면 밑에 참고자료를 확인해주세요 도움이 되시길바라며 이상 마치겠습니다