# [[Hydration|Hydration]]

## 📌 Brief Summary
Hydration(하이드레이션)은 React가 서버에서 렌더링된 정적 HTML에 이벤트 리스너와 상태를 연결하여 상호작용이 가능하도록 만드는 과정입니다 [1]. [[Next.js 15|Next.js 15]] 환경에서는 이러한 하이드레이션 과정이 오직 클라이언트 컴포넌트(Client Components)에서만 발생합니다 [1]. [[CSS-in-JS|CSS-in-JS]]와 같은 스타일링 방식을 사용할 때, 서버와 클라이언트 간의 생성 결과물이 다르면 '하이드레이션 불일치(hydration mismatch)'가 발생할 수 있으므로 세심한 관리가 필요합니다 [2-4].

## 📖 Core Content
* **하이드레이션의 작동 원리:** React 애플리케이션에서 하이드레이션은 서버가 완전한 초기 HTML을 생성하고, 브라우저가 클라이언트 컴포넌트용 [[JavaScript|JavaScript]]를 다운로드한 후, React가 해당 컴포넌트에 상호작용(인터랙티비티)을 부여하는 순서로 진행됩니다 [1, 4]. 
* **하이드레이션 불일치(Hydration Mismatch):** 서버에서 생성한 콘텐츠와 클라이언트가 기대하는 콘텐츠가 다를 때 발생합니다 [4]. 예를 들어, 서버와 클라이언트가 서로 다른 타임스탬프를 생성하거나 동적으로 다른 CSS 클래스명을 생성할 때 이 문제가 일어납니다 [3, 4].
* **[[styled-components|styled-components]]와 하이드레이션 문제 해결:** [[Next.js App Router|Next.js App Router]] 및 서버 사이드 렌더링(SSR) 환경에서 styled-components를 사용할 때 서버와 클라이언트가 다른 클래스명을 생성하여 하이드레이션 불일치 위험이 발생할 수 있습니다 [3]. 이를 방지하기 위해 개발자는 `next.config.js`에서 `styledComponents` 컴파일러 옵션을 활성화하여 서버와 클라이언트 경계에서 일관된 클래스명이 생성되도록 보장해야 합니다 [3].
* **테마 전환 시의 하이드레이션 관리:** 라이트 모드와 다크 모드 같은 테마를 전환할 때, 일관된 클래스명 해시를 유지하여 하이드레이션 불일치를 방지하려면 테마 객체를 `ThemeProvider`에 올바르게 전달하여 클래스명을 안정화해야 합니다 [2, 5].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Server Components (RSC)|React Server Components (RSC]], Client Components, CSS-in-JS, [[styled-components|styled-components]]
- **Projects/Contexts:** [[Next.js App Router|Next.js App Router]], [[Server-Side Rendering (SSR)|Server-Side Rendering (SSR]]
- **Contradictions/Notes:** 소스에 관련 정보가 부족합니다.

---
*Last updated: 2026-04-26*