React Hydration

Creator

Creator

Seonglae Cho

Created

Created

2021 Mar 1 10:54

Editor

Editor

Seonglae Cho

Edited

Edited

2021 Nov 19 8:50

Refs

Refs

리액트가 정적으로 렌더링된 (SSR 또는 pre-rendered) HTML 컨텐츠로부터 컴포넌트 트리를 재구성함


import { renderToString } from 'react-dom/server'
import { hydrate } from 'react-dom'

notion image

hydrate, hydration의 의미?

(Re)hydration 이라는 용어는 주로 두가지 상황에서 쓰입니다. 리액트가 정적으로 렌더링된 (SSR 또는 pre-rendered) HTML 컨텐츠로부터 컴포넌트 트리를 재구성함 마찬가지로 정적으로 Persist된 리덕스 스토어 등을 런타임 상태로 재구성함 어감에서 할 수 있듯이 동적이였던 무언가를 정적인 상태로 저장해두었을 때, 이를 다시 원상태로 돌리는 행위를 뜻합니다.

hydrate, hydration의 의미?

https://jsdev.kr/t/hydrate-hydration/4615/2

hydrate, hydration의 의미?

리액트의 hydration이란?

수화란 우리 몸에 수분을 보충하는 행위를 뜻한다. 리액트에서 왜 hydration이라는 용어를 사용하는건지는 아래 내용을 살펴보고 다시 한번 생각해보자. 리액트는 DOM에 리액트 컴포넌트를 렌더링해주는 render 메소드를 제공한다. ReactDOM.render(element, container[, callback]) 컨테이너 DOM에 리액트 엘리먼트를 렌더링하는 함수이다. 이 render함수는 컨테이너의 자식으로 리액트 컴포넌트를 넣어주는데, 기존에 이미 렌더링 된 리액트 컴포넌트가 있다면 새로 렌더링 하는게 아니라 업데이트만 해준다.

리액트의 hydration이란?

https://simsimjae.tistory.com/389

리액트의 hydration이란?

Recommendations

/////////////