[React.js/리액트] ReactDOM.render() , ReactDOM.hydrate()의 차이점

회사에서 시니어분들이 구축해놓은 프로젝트에 로직에 관련된 코드를 얹기만 하는 수준이라
정확히 리액트의 원리에 대해 깊게 이해할 시간을 가지지 못했다.
개인 프로젝트를 진행하면서 하나씩 차근차근 살펴보려 한다.

1. ReactDOM.render()

먼저 react 프로젝트를 생성하면 아래와 같은 index.js 페이지를 볼 수 있다.

index.js 

ReactDOM.render(element, container[, callback])

여기서 주목해야 될 코드는 ReactDOM.redner()이다
ReactDOM은 브라우저에 UI를 렌더링 할 때 사용하는 라이브러리이다.
프로젝트를 실행하면 App이라는 React 컴포넌트를 document.getElementById('root')로 불러와진 Dom Element에 렌더링 하는 것이다.

즉 root라는 id를 가진 DOM Element아래 리액트 컴포넌트들을 서브트리 형태로 렌더링 하는 것이다.
(참고로 id가 root인 element는 index.html 내에 위치한다)

리액트 공식 홈페이지에서 ReactDOM.render()에 관한 주의사항을 살펴보면 
SSR(Server-Side rendering)을 하는 경우 hydrate() 사용을 권장하는 것을 볼 수 있다.

그렇다면 hydrate란 뭘까?

2. ReactDOM.hydrate()

hydrate에 대한 이해에 앞서 SSR과 CSR에 대해 알 필요가 있다.

먼저 SSR(Server Side Rendering)은 말 그대로 
서버에서 렌더링을 한 후, 클라이언트에 Data와 HTML파일을 결합하여 내려주는 방식이다.

User가 웹사이트에서 request -> 서버는 렌더링 가능한 HTML 파일을 생성 -> 
렌더링 가능한 상태의 HTML 파일을 Client에 전달-> 
이미 렌더링 가능한 상태이기 때문에 전달받은 즉시 HTML 렌더링이 이루어짐 (빠른 로딩) -> 
브라우저는 자바스크립트를 다운받고 컴파일이 완료되면 사용자의 조작이 가능해지는 원리이다

CSR(Client Side Rendering)은 
최초 요청시에 HTML을 비롯한 모든 리소스를 받아온 후, 서버에 데이터를 요청할 때마다 View를 컨트롤하는 방식이다.

User가 웹 사이트에 Request 하면 Client에서는 HTML과 JS, CSS 등 모든 리소스를 다운로드한다
이때 SSR과는 달리 모든 리소스가 불러와질 때까지 유저는 아무것도 볼 수 없다. (첫 진입 시 느린 로딩)
다운로드가 완료되면 데이터를 받아오기 위한 API들이 호출되고 요청한 data를 내려받은 후 사용자의 조작이 가능해지는 원리이다.

그럼 SSR에서는 왜 hydrate를 사용해야 되고, 어떤 원리일까?

앞서 말했든 SSR은 서버가 Client에 즉시 렌더링 가능한 HTML 파일을 내려주는데
이 서버에서 내려주는 HTML로 렌더링 된 화면은 리액트와 전혀 상관이 없다.
리액트는 이미 View에 HTML 파일이 렌더링 되어 있는지 아닌지와 상관없이 ReactDOM.render()를 실행하기 때문에
컴포넌트의 불필요한 렌더링/업데이트가 이루어진다. 

그래서 SSR의 경우 ReactDOM.hydrate를 권장하는 것이다

ReactDOM.hydrate(element, container[, callback])

hydrate()도 render()와 동일하지만 다른 점은 기존에 렌더링 된 마크업이 존재할 경우 
다시 한번 렌더링을 하지 않고 이벤트 리스너만 연결한다는 점이다.

서버에서 이미 즉시 랜더링 가능한 상태로 내려온 HTML 파일이 존재한다면
이 HTML에 이벤트 핸들러(기능)들만 붙이는 프로세스를 hydration(수화)라고 표현하는 것이다.

ReactDOM.hydrate()는 리액트 Element를 두 번째 파라미터로 지정된 DOM Element(Container 역할)에 hydrate 처리를 한다
= 기존에 서버에서 내려온 DOM Tree위에 자바스크립트 코드들이 DOM요소를 찾아 이벤트 핸들러를 매칭 시킨다

참고

ReactDOM – React

---

번외로 내가 hydrate와 render를 사용하는 방법이다
CSR + SSR 환경에서 작업할 때 아래와 같이 hydrate와 render를 모두 사용한다

=