hydration의 개념이 헷갈립니다

뭘 좀 할려고 하다보면 hydration 이슈가 꼭 발생하더라고요.
그래서 이게 무슨 개념인지 대충 알아보려고 하니까 

1. 

위는 CSR에 관한 도식입니다.
제가 이해한 바로는

1) 서버측에서 index.html을 던져줌. 이 때는 빈 페이지 상태.
2) 그리고 번들링된 겁나 큰 자바스크립트 코드를 던져줌.
3) 클라이언트 측에서는 이 자바스크립트 코드를 실행
4) 자바스크립트 코드를 실행해서 JSX를 화면단에다 뿌려줌.

App을 실행한다는 얘기가 좀 추상적으로 들려서 그런데 
여기서 3)이 Execute App에 해당하는 건가요? 


2. 



웹 페이지가 이런식으로 구성되어있다 치면
여기서 Server Component는 서버에서 빌드 시 미리 만들어둔 걸 그대로 전송만 해주거나(SSG)
혹은 서버에서 유저가 요청 시 서버측에서 그때그때 만들어주는 걸 전송해주는(SSR) 것 같은데

Client Component는 서버에서 유저한테 자바스크립트 코드를 주고
니가 알아서 실행해서 화면에 띄워라~~ 라는 구조잖습니까

그러면 hydration이라는 과정은 클라이언트에게 던져준 HTML에
클라이언트 측에서 자바스크립트를 실행하고 HTML에다가 JS를 매칭시키는 행위라고 나오던데
이게 대체 어떻게 가능한지 이해가 안 갑니다.

예를 들어보겠습니다.

```
export default function Home() {
  return (
    <div>
      <Test/>
      <p>이건 그냥 나오는 거</p>
    </div>
  );
}
```

```
'use client'
</pre>
<pre>export default function Test() {
  const [state, setState] = useState(0)
  return (
    <div>
      <p>{state}</p>
      <button onClick={()=>{setState(prev => prev + 1)}}>버튼<button>
    </div>
  );
}
```

이런 컴포넌트가 있다고 가정할 때 
1) <Home> 컴포넌트에 있는 <div><p></p></div>만 pre-rendered되어 클라이언트에게 전달됨
2) 그리고 그에 맞춰 CSS도 전달됨
3) 이후 <Test /> 가 담긴 JS 코드가 클라이언트에게 전달됨
4) 근데 hydration 과정을 통해서 HTML과 JS가 매칭된다고 함.

이게 어떤 걸 말하는지 확실하게 잘 안 잡히네요.

그리고 개념만 따져보자면 onClick과 같은 이벤트리스너 JS를 
HTML에 부착시켜주는 느낌이 hydration의 개념인것 같아보이는데

그렇다면 클라이언트 컴포넌트에서도 
<div><p></p><button></button></div>와 같은 HTML 요소는 그냥 렌더링 해버리고
그 뒤에 useState나 onClick같은 JS를 부착시켜버리는 건가요?


개념이 정리가 안되니까 질문이 너무 중구난방이네요.
중구가 시켰습니다..
<!--more-->