[React] 리액트의 hydration

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

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

render는 컨테이너 DOM에 element를 렌더링 하는 함수이다. 이 render함수는 container의 자식으로 react component를 넣어주는데, 기존에 이미 렌더링 된 react component가 있다면, 업데이트만 해주게 된다. 그리고 렌더링이 완료되면 세 번째 인자로 전달된 callback이 실행되게 할 수 있다.

---

 이 방식은 CSR(Client Side Rendering)을 할 경우에 사용된다. 그렇다면 SSR(Server Side Rendering)을 사용하는 프레임워크를 사용할 경우에는 어떻게 해야 할까?

 이때 사용되는 것이 hydrate라는 메소드 이다. 형식은 render 메소드와 같다. 서버 사이드 렌더링의 경우 서버에서 만들어진 정적인 HTML을 가져와서 유저에게 제공한다. 따라서 클라이언트 사이드에서 별도의 렌더링이 필요하지 않기 때문에 render 메소드를 사용하지 않는다.

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

 정적인 HTML을 interactive 하게 바꿔주는 작업이 필요한데, 이를 담당하는 것이 hydrate 메소드이다. hydrate는 렌더링 역할은 담당하지 않고 렌더링 된 컨테이너에 이벤트를 보충하기 위해 사용된다.

---

글을 마치며

 블로그를 포스팅하는 순서가 뒤죽박죽이라고 생각이 드는데, 한 개념을 정리하다 보면 그 개념을 이해하기 위한 또 다른 개념을 정리하게 되는 루틴 때문인 것 같다.

 이번에 정리해본 ReactDOM.render()은 이제 사용하지 않게 되겠지만, 레거시를 알아야 새로운 기술 등장의 이유를 알 수 있다고 생각한다. 그리고 ReadctDOM.hydrate()에 대해 간단하게 정리를 해보았으니, SSR을 좀 더 관심 있게 공부해볼 예정이다.