Search
Duplicate

React hydrate

Created
2021/04/06 12:29
tags
🖱️React
ReactDOM에는 ReactDOM.render() 함수 말고도 ReactDOM.hydrate() 라는 함수를 제공한다.
전자의 경우 인자로 넘겨진 Element 자식에 리액트 컴포넌트를 렌더링하고 이미 렌더링 되있는 경우 변경된 부분만 업데이트한다.
후자의 경우 렌더링의 과정이 빠져있다. 즉, SSR(Server Side Rendering)과 같이 서버에서 HTML을 렌더링하여 보내주는 경우 React에서 추가 렌더링이 필요없기 때문에 hydrate() 를 사용한다. 전자의 함수를 이용해서 렌더링하면 서버에서 보내준 HTML가 있음에도 불구하고 다시 한번 렌더링을 진행한다.
hydrate() 함수를 사용하면 서버에서 보내준 HTML 구조에 React에서 사용하는 이벤트를 적용시킨다. 함수 사용전에는 단순한 HTML이였다면 이제는 React가 관리할 수 있는 컴포넌트가 된다.
hydrate 용어에는 위 내용뿐만 아니라 정적인 Store를 동적으로 만든다는 의미도 담겨있다.
⇒ 정적인 HTML과 Store를 동적으로 만들기