# [[Style Registry Pattern|Style Registry Pattern]] ## πŸ“Œ Brief Summary μŠ€νƒ€μΌ λ ˆμ§€μŠ€νŠΈλ¦¬ νŒ¨ν„΄([[Style Registry|Style Registry]] Pattern)은 Styled Components와 같은 λŸ°νƒ€μž„ CSS-in-JS 라이브러리λ₯Ό [[React Server Components|React Server Components]](RSC) 및 Next.js App Router ν™˜κ²½μ— 맞게 μ‘°μ •ν•˜κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” μ•„ν‚€ν…μ²˜ νŒ¨ν„΄μž…λ‹ˆλ‹€. μ„œλ²„ μ»΄ν¬λ„ŒνŠΈ ν™˜κ²½μ—μ„œλŠ” [[React Context|React Context]]λ₯Ό μ‚¬μš©ν•  수 μ—†μ–΄ 기쑴의 λŸ°νƒ€μž„ CSS μ£Όμž… 방식이 μž‘λ™ν•˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—, μ„œλ²„ λ Œλ”λ§ 쀑 CSS κ·œμΉ™μ„ μˆ˜μ§‘ν•˜λŠ” λ ˆμ§€μŠ€νŠΈλ¦¬(Registry)λ₯Ό μƒμ„±ν•˜μ—¬ 이λ₯Ό ν•΄κ²°ν•©λ‹ˆλ‹€. μ΄λ ‡κ²Œ μˆ˜μ§‘λœ μŠ€νƒ€μΌμ€ HTML ν—€λ“œμ— 직접 μ£Όμž…λ˜μ–΄, μ΅œμ‹  μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§ νŒ¨λŸ¬λ‹€μž„ λ‚΄μ—μ„œλ„ CSS-in-JS의 κΈ°λŠ₯을 μœ μ§€ν•  수 μžˆλ„λ‘ λ•λŠ” 핡심 역할을 μˆ˜ν–‰ν•©λ‹ˆλ‹€. ## πŸ“– Core Content * **λ°°κ²½ 및 문제점 (RSCμ™€μ˜ ν˜Έν™˜μ„± 문제):** [[Next.js|Next.js]] App Router와 React [[Server Components|Server Components]](RSC) νŒ¨λŸ¬λ‹€μž„μœΌλ‘œμ˜ μ „ν™˜μ€ λŸ°νƒ€μž„ CSS-in-JS 라이브러리의 방식에 큰 과제λ₯Ό μ•ˆκ²¨μ£Όμ—ˆμŠ΅λ‹ˆλ‹€. μ„œλ²„ μ»΄ν¬λ„ŒνŠΈλŠ” μ„œλ²„μ—μ„œ 정적 HTML둜 λ Œλ”λ§λ˜λ©° λΈŒλΌμš°μ €μ—μ„œ μ‹€ν–‰λ˜μ§€ μ•ŠκΈ° λ•Œλ¬Έμ—, React Context에 μ˜μ‘΄ν•˜μ—¬ λŸ°νƒ€μž„μ— μŠ€νƒ€μΌμ„ λ™μ μœΌλ‘œ μƒμ„±ν•˜κ³  μ£Όμž…ν•˜λŠ” κΈ°μ‘΄ 방식(Styled Components, Emotion λ“±)은 μ œλŒ€λ‘œ μž‘λ™ν•˜μ§€ λͺ»ν•©λ‹ˆλ‹€. * **νŒ¨ν„΄ κ΅¬ν˜„μ„ μœ„ν•œ 3단계 ν”„λ‘œμ„ΈμŠ€:** μ΄λŸ¬ν•œ λ Œλ”λ§ 간극을 λ©”μš°κΈ° μœ„ν•΄ [[Next.js 15|Next.js 15]]μ—μ„œλŠ” CSS-in-JS 라이브러리λ₯Ό μ§€μ›ν•˜κΈ° μœ„ν•œ 3단계 옡트인(opt-in) ν”„λ‘œμ„ΈμŠ€λ‘œ μŠ€νƒ€μΌ λ ˆμ§€μŠ€νŠΈλ¦¬ νŒ¨ν„΄μ„ λ„μž…ν–ˆμŠ΅λ‹ˆλ‹€. 1. **Style Registry 생성:** μ„œλ²„ λ Œλ”λ§μ΄ μ§„ν–‰λ˜λŠ” λ™μ•ˆ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ λ°œμƒν•˜λŠ” λͺ¨λ“  CSS κ·œμΉ™μ„ μˆ˜μ§‘ν•˜λŠ” λ ˆμ§€μŠ€νŠΈλ¦¬ 객체λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 2. **μŠ€νƒ€μΌ μ£Όμž…:** `useServerInsertedHTML` ν›…(hook)을 μ‚¬μš©ν•˜μ—¬ μˆ˜μ§‘λœ CSS κ·œμΉ™λ“€μ„ HTML λ¬Έμ„œμ˜ `` νƒœκ·Έ 내에 μ£Όμž…ν•©λ‹ˆλ‹€. 3. **Provider λž˜ν•‘:** 이 λ ˆμ§€μŠ€νŠΈλ¦¬ μ»¨ν…μŠ€νŠΈλ₯Ό μ œκ³΅ν•˜λŠ” ν΄λΌμ΄μ–ΈνŠΈ μ»΄ν¬λ„ŒνŠΈ(Client Component)둜 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 전체λ₯Ό κ°μ‹Έμ€λ‹ˆλ‹€. * **ν•˜μ΄λ“œλ ˆμ΄μ…˜ 뢈일치([[Hydration|Hydration]] Mismatch) μœ„ν—˜ 및 ν•΄κ²°μ±…:** μŠ€νƒ€μΌ λ ˆμ§€μŠ€νŠΈλ¦¬ νŒ¨ν„΄μ„ μ‚¬μš©ν•˜λ©΄ Styled Componentsλ₯Ό App Routerμ—μ„œ κΈ°λŠ₯ν•˜κ²Œ ν•  수 μžˆμœΌλ‚˜, μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈκ°€ 각각 λ Œλ”λ§λ  λ•Œ μ„œλ‘œ λ‹€λ₯Έ CSS 클래슀 이름을 생성할 경우 ν•˜μ΄λ“œλ ˆμ΄μ…˜ 뢈일치 λ¬Έμ œκ°€ λ°œμƒν•  μœ„ν—˜μ΄ μžˆμŠ΅λ‹ˆλ‹€. 이λ₯Ό λ°©μ§€ν•˜κΈ° μœ„ν•΄ κ°œλ°œμžλŠ” λ°˜λ“œμ‹œ `next.config.js` μ„€μ • νŒŒμΌμ—μ„œ `styledComponents` 컴파일러 μ˜΅μ…˜μ„ ν™œμ„±ν™”ν•˜μ—¬, μ„œλ²„μ™€ ν΄λΌμ΄μ–ΈνŠΈ 경계에 걸쳐 μΌκ΄€λœ 클래슀 이름이 μƒμ„±λ˜λ„λ‘ μ²˜λ¦¬ν•΄μ•Ό ν•©λ‹ˆλ‹€. ## πŸ”— Knowledge Connections - **Related Topics:** [[React Server Components (RSC)|React Server Components (RSC]], CSS-in-JS, Next.js App Router, Hydration Mismatch, [[Styled Components|Styled Components]] - **Projects/Contexts:** [[Next.js 15|Next.js 15]], Modern Frontend Engineering [[Architecture|Architecture]] - **Contradictions/Notes:** μ†ŒμŠ€μ— λ”°λ₯΄λ©΄ μŠ€νƒ€μΌ λ ˆμ§€μŠ€νŠΈλ¦¬ νŒ¨ν„΄μ΄ Styled Componentsλ₯Ό RSC ν™˜κ²½μ—μ„œ μž‘λ™ν•˜κ²Œ ν•΄μ£ΌλŠ” ν›Œλ₯­ν•œ 해결책이긴 ν•˜μ§€λ§Œ, μ™„μ „ν•œ RSC νŒ¨λŸ¬λ‹€μž„μ„ μΆ”κ΅¬ν•˜λŠ” μ•„ν‚€ν…μ²˜μ—μ„œλŠ” 직렬화 μ˜€λ²„ν—€λ“œμ™€ μžλ°”μŠ€ν¬λ¦½νŠΈ λŸ°νƒ€μž„ λΉ„μš©(Runtime Tax)을 ν”Όν•˜κΈ° μœ„ν•΄ 동적 CSS-in-JS λ³΄λ‹€λŠ” 정적 μŠ€νƒ€μΌ([[Tailwind CSS|Tailwind CSS]]) λ˜λŠ” Zero-Runtime CSS-in-JS([[vanilla-extract|vanilla-extract]]) 방식을 ꢌμž₯ν•˜κΈ°λ„ ν•©λ‹ˆλ‹€. --- *Last updated: 2026-04-26*