Hydration

이 개념을 이해하기 위해 몇가지 테스트를 하겠다

브라우저의 Sources에서 disable Javascript 실행 후 anchor를 클릭하여 페이지를 이동해보자

• 링크 클릭에 따라 화면이 새로고침된다
• 자바스크립트를 사용한 건 아니고 그저 a 태그의 link를 따라가는 것이다

그럼 다시 enable Javascript 후 이동해보자

• 새로고침 되지 않고 좀 더 빠르다

→ 이것이 React Hydrated 된 것이다 (오~ 모르겠는데~)


처음에는 단순히 a태그였다가 React component로 변환된것이다

그래서 클릭이 발생되면 React가 끼어들어 페이지 전체를 로드하지 않고 빠르게 navigate 할 수 있게 된다. 이는 더 이상 평범한 a 태그가 아니라 Link component로 새로 태어난 것이라고 생각하면 된다

흐름을 이해해보자

어떤 페이지에 도달하면 UI를 가지고 있는 dummy HTML을 받고 → 프레임워크는 바로 load를 시작한다 → React load, components load.. 그리고 모든것이 initialize 됨 → 이러고나면 내 앱은 React App이 됨 → 이러고 나서야 비로소 interactive 해지고 navigation이 빨라지고… 그렇게 되는 것이다

물론 소스코드에 a 태그가 남아있기는 하지만 이 태그는 단순한 a 태그가 아니라 javascript에 의해 제어되는 a 태그인 것이다

만약에 어떤 이유로 javascript 로드하는데 아아아주 오랜 시간이 걸려서 react component가 아직 로드되지 않았다면 hard navigation(지금의 경우는 페이지를 새로고침하면서 이동하는 것)하게 된다

실험해보자

useState를 사용하는 코드를 추가하고 브라우저에서 disable Javascript를 실행했다

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useState } from "react";

export default function Navigation() {
  const path = usePathname();
  const [count, setCount] = useState(0); // 여기 
  const handlePlusClick = () => {
    setCount(count + 1);
  };

  return (
    <nav>
      <ul>
        <li>
          <Link href={"/"}>Home</Link> {path === "/" ? "🔥" : ""}
        </li>
        <li>
          <Link href={"/about-us"}>About us</Link>{" "}
          {path === "/about-us" ? "🔥" : ""}
        </li>
      </ul>
      <div>
        <h3>{count}</h3>
        <button onClick={handlePlusClick}>+1</button>
      </div>
    </nav>
  );
}

아무리 버튼을 눌러도 count에 변화가 없다(방황하는 마우스)

• 버튼의 eventlistener가 연결되지 않았기 때문이다
• initial state는 불러와진걸 볼 수 있는데(0), 이는 최초의 렌더 이후 인터렉션이 안되는 것이기 때문에 초깃값은 적용된것이다
  
  

다시 enable Javscript를 실행하면 setState가 동작해서 값이 변화되는 걸 볼 수 있다(편안한 마우스)

---

그래서 Hydration이란?

HTML을 React application으로 초기화하는 작업이다
⇒ 예제를 사용하자면, 0이 쓰인것 외에 아무것도 없는 버튼을 받고, React를 initialize하여 onClick을 부착하여 기능을 수행하게 하는 것이다