[React] hydration이란? (+ root란?)

• Hydration은 React에서 제공하는 기능으로, 서버에서 렌더링한 정적인 HTML에 이벤트 핸들러 함수들을 붙여 동적으로 상호작용이 가능하게 만드는 과정을 말한다. 이는 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)의 장점을 결합한 방식으로, 미리 렌더링된 HTML과 이벤트와 관련된 JS 파일을 동시에 전달하여 초기 페이지 로딩 속도를 개선하고 동적인 상호작용을 가능하게 한다.

• React 16부터는 이 Hydration 기능을 'React.hydrate'를 통해 사용할 수 있다. 이는 서버에서 렌더링한 컨테이너에 이벤트를 보충할 때 사용되며, 일반적인 CSR을 할 때 실행되는 render 메서드와는 다르다.

• React18에서는 createRoot를 이용한 렌더링이 고착되었으며, 이를 통해 루트를 미리 변수로 설정하고 계속해서 사용함으로써 불필요한 렌더링을 줄일 수 있다. 또한, 기존의 hydrate 함수를 제거하고 createRoot가 리턴하는 객체의 메서드로 포함시켜 코드를 더 간결하게 만들었다.

• React18은 SSR의 문제점인 Time to Interactive 문제를 해결하기 위해 선택적인 hydration 기술을 추가하였다. 이를 통해 이미 렌더링된 HTML 파일에 이벤트 핸들러와 관련된 JS 파일을 연동시키는 것이 가능해져 더 빠른 "First paint"를 실현할 수 있게 되었다.