리액트의 hydration이란?

hydration = 수화

수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자.

 

리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다.

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

컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다. 그리고 렌더링이 완료되면 세번쨰 인자로 전달된 콜백이 실행되게 할 수 있다.

 

즉 ReactDom의 render메소드는 컴포넌트를 렌더링한 후에 콜백을 실행한다.

 

반면에, ReactDom에는 hydrate라는 메소드도 존재한다.

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

보면 메소드 모양이 render와 똑같다. hydrate는 렌더링은 하지 않고 이벤트 핸들러만 붙여준다. 서버사이드렌더링을 해서 이미 마크업이 채워져있는 경우에는 굳이 render 메소드를 사용할 필요가 없다. SSR을 하는 경우에는 hydrate로 콜백만 붙여야 한다. 

 

CSR(Client Side Rendering)을 하는 경우에는 타겟 컨테이너에 리액트 컴포넌트가 렌더링 된 적이 없을것이기 때문에 render메소드를 사용해야 한다. 하지만 SSR 프레임워크와 함께 리액트를 사용할때는 hydrate 사용을 고려해야 한다.

 

여기서 말하는 hydrate는 좁은 의미의 hydrate이다. 위에서 hydrate를 수분 보충으로 표현 했다. 아래 이미지를 보면 hydrate가 뭔지 좀 더 잘 이해가 될 것 이다.

서버가 완성된 HTML을 내려준다. 이때 Dehydrate는 수분을 없앤다는 뜻이다. 다시 말해서 동적인것을 정적으로 만드는 행위를 Dehydrate라고 표현했다. 그리고 나서 JS가 실행되면서 리액트가 정적인 HTML과 store를 동적인 리액트 컴포넌트 트리와 store로 변환하는 과정이 일어나는데, 이걸 (Re)hydrate라고 한다. 마치 수분기 없는 정적인 상태에서 수분 넘치는 동적인 상태로 변화한것이다. 문제는 이렇게 rehydrate가 일어나면서 쓸데없이 화면이 한번더 그려지는 현상이 발생한다는것이다. 왜냐면 리액트는 서버에서 완성된 HTML이 내려와서 이미 화면에 제대로 렌더링이 됬는지 안됬는지 모르고 자신이 할일을 그냥 했을 뿐이다. 그래서 SSR을 하는 경우에는 ReactDom의 render메소드가 아니라 hydrate 메소드를 사용해야 한다고 말했었다.

hydration이 되어야 진짜 리액트 컴포넌트

서버에서 내려준 HTML로 렌더링 된 화면은 그냥 단순히 그림일 뿐이다. 리액트가 관리하지 않는 화면이다. SSR을 하더라도 컴포넌트를 리액트가 관리하게 하기 위해서는 hydration은 꼭 필요한 작업이다.

 

 

결론

리액트에서 hydration이라고 하는 용어를 사용하는 이유는 "서버사이드 렌더링으로 만들어진 수분이 없는 정적인 HTML과 State로부터 수분을 보충하는 과정(동적인 상태로 변화)인 hydrate가 일어나기 때문" 이라고 추측해본다.