React에서 "hydrate"는 일반적으로 서버 측 렌더링된 HTML과 클라이언트 측 JavaScript 앱을 연결하는 과정을 의미합니다.
보통 React 앱은 JavaScript로 작성되며, 브라우저에서 JavaScript 파일이 로드되어야 실행됩니다. 이 때, 첫 페이지 로드 시에 React 앱이 화면에 나타나기까지 JavaScript 파일이 다운로드되는 시간이 필요하므로 사용자는 앱이 로드되는 동안 대기해야 합니다. 이는 사용자 경험을 저하시킬 수 있습니다.
이 문제를 해결하기 위해 React는 서버 측 렌더링을 지원합니다. 서버에서 React 앱을 렌더링하여 HTML 문자열로 출력한 다음, 이 HTML 문자열을 클라이언트로 보내어 브라우저에서 JavaScript 파일을 로드하고 React 앱을 다시 마운트할 수 있습니다. 이를 "hydration"이라고 합니다.
즉, "hydrate"는 클라이언트 측에서 서버 측에서 렌더링된 React 앱을 다시 렌더링하여 클라이언트 측 JavaScript 앱으로 전환하는 과정을 말합니다. 이를 통해 앱의 초기 렌더링 시간을 단축하고 사용자 경험을 향상시킬 수 있습니다.
React에서는 ReactDOM.hydrate() 함수를 사용하여 hydrate를 수행합니다. 이 함수는 ReactDOM.render() 함수와 거의 동일하지만, 렌더링할 컴포넌트 대신 서버에서 렌더링된 HTML 문자열을 전달받는다는 점이 다릅니다.
'프론트엔드 > React' 카테고리의 다른 글
| Portals (0) | 2023.03.11 |
|---|---|
| 연속된 커스텀 훅(훅인마) (0) | 2023.03.09 |
| useEffect vs useLayoutEffect 렌더링 비밀 유출?!?! (0) | 2023.01.27 |
| React에서 innerHTML을 !?!?! (0) | 2023.01.24 |
| Masonry layout(react) (0) | 2023.01.23 |
