# [[MUI|MUI]] ## πŸ“Œ Brief Summary MUI(Material UI)λŠ” React ν”„λ‘œμ νŠΈμ—μ„œ μ‚¬μš©λ˜λŠ” λŒ€ν‘œμ μΈ UI μ»΄ν¬λ„ŒνŠΈ 라이브러리 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€ [1, 2]. 이 λΌμ΄λΈŒλŸ¬λ¦¬λŠ” μœ μ—°ν•˜κ³  μž¬μ‚¬μš© κ°€λŠ₯ν•œ UIλ₯Ό κ΅¬μΆ•ν•˜κΈ° μœ„ν•΄ 볡합 μ»΄ν¬λ„ŒνŠΈ([[Compound Components|Compound Components]]) νŒ¨ν„΄μ„ 적극적으둜 ν™œμš©ν•©λ‹ˆλ‹€ [1]. μ†ŒμŠ€ 데이터 λ‚΄μ—μ„œλŠ” 주둜 μŠ€νƒ€μΌλ§ λ„κ΅¬μ™€μ˜ ν˜Έν™˜μ„± μ‚¬λ‘€λ‚˜ λ””μžμΈ μ‹œμŠ€ν…œμ˜ μ˜ˆμ‹œλ‘œ κ°„λž΅ν•˜κ²Œ μ–ΈκΈ‰λ˜λ©°, 심측적인 μ•„ν‚€ν…μ²˜λ‚˜ μ „λ°˜μ μΈ κΈ°λŠ₯에 λŒ€ν•œ μ •λ³΄λŠ” λΆ€μ‘±ν•©λ‹ˆλ‹€. ## πŸ“– Core Content * **볡합 μ»΄ν¬λ„ŒνŠΈ νŒ¨ν„΄([[Compound Components Pattern|Compound Components Pattern]]) 적용:** μž¬μ‚¬μš© κ°€λŠ₯ν•œ UIλ₯Ό ꡬ좕할 λ•Œ 널리 μ“°μ΄λŠ” 볡합 μ»΄ν¬λ„ŒνŠΈ νŒ¨ν„΄μ€ MUI와 같은 μˆ˜λ§Žμ€ UI λΌμ΄λΈŒλŸ¬λ¦¬μ—μ„œ 맀우 κ°•λ ₯ν•˜κ²Œ μ‚¬μš©λ˜λŠ” νŒ¨ν„΄μž…λ‹ˆλ‹€ [1]. μ†ŒμŠ€μ—μ„œλŠ” 이 νŒ¨ν„΄μ΄ 적용된 ꡬ체적인 μ»΄ν¬λ„ŒνŠΈ μ‚¬λ‘€λ‘œ 'MUI React Stepper'λ₯Ό μ–ΈκΈ‰ν•˜κ³  μžˆμŠ΅λ‹ˆλ‹€ [1]. * **[[styled-components|styled-components]]μ™€μ˜ ν˜Έν™˜μ„± 처리:** MUIλŠ” styled-components와 같은 CSS-in-JS 도ꡬ와 ν•¨κ»˜ μ‚¬μš©λ  λ•Œ μƒμ†λœ 기본값을 λ¦¬μ…‹ν•˜κΈ° μœ„ν•΄ `undefined`λ₯Ό prop으둜 μ „λ‹¬ν•˜λŠ” 방식을 μ·¨ν•©λ‹ˆλ‹€ [3]. styled-components μΈ‘μ—μ„œλŠ” v6.3.12 릴리슀λ₯Ό 톡해 λͺ…μ‹œμ μœΌλ‘œ μ „λ‹¬λœ `undefined` prop을 κ°•μ œλ‘œ μ œκ±°ν•˜μ§€ μ•Šκ³  λ³΄μ‘΄ν•˜λ„λ‘ μˆ˜μ •ν•˜μ—¬ MUI(및 [[Radix UI|Radix UI]])μ™€μ˜ ν˜Έν™˜μ„± 문제λ₯Ό ν•΄κ²°ν–ˆμŠ΅λ‹ˆλ‹€ [3]. * **λ””μžμΈ 토큰 및 ν…Œλ§ˆ(Theming):** 2025λ…„ κΈ°μ€€ ν™•μž₯ κ°€λŠ₯ν•œ UI μ‹œμŠ€ν…œμ„ κ΅¬μΆ•ν•˜κΈ° μœ„ν•œ κ°€μ΄λ“œμ—μ„œ Material UIλŠ” λ””μžμΈ 토큰([[Design Tokens|Design Tokens]])κ³Ό UI ν…Œλ§ˆ μ μš©μ„ 톡해 λ””μžμΈ μ˜λ„(intent)와 영ν–₯(impact)을 λΆ„λ¦¬ν•˜μ—¬ ν™•μž₯ κ°€λŠ₯ν•œ μ‹œμŠ€ν…œμ„ κ΅¬μ„±ν•˜λŠ” λ§₯락과 ν•¨κ»˜ μ–ΈκΈ‰λ©λ‹ˆλ‹€ [2]. * **정보 λΆ€μ‘±:** μ†ŒμŠ€μ— κ΄€λ ¨ 정보가 λΆ€μ‘±ν•©λ‹ˆλ‹€. 제곡된 μ†ŒμŠ€μ—μ„œλŠ” MUI의 μ „λ°˜μ μΈ μ•„ν‚€ν…μ²˜, μ„±λŠ₯ 벀치마크, λ˜λŠ” [[Tailwind CSS|Tailwind CSS]] λ“± λ‹€λ₯Έ μŠ€νƒ€μΌλ§ μ ‘κ·Όλ²•κ³Όμ˜ 직접적인 μž₯단점 비ꡐ λ“± 루트 μ£Όμ œμ— λŒ€ν•œ ꡬ체적인 μ„ΈλΆ€ λ‚΄μš©μ„ 닀루고 μžˆμ§€ μ•ŠμŠ΅λ‹ˆλ‹€. ## πŸ”— Knowledge Connections - **Related Topics:** [[Compound Components|Compound Components]], styled-components, [[Design Tokens|Design Tokens]] - **Projects/Contexts:** UI Component Libraries - **Contradictions/Notes:** μ†ŒμŠ€μ— κ΄€λ ¨ 정보가 λΆ€μ‘±ν•©λ‹ˆλ‹€. MUI에 λŒ€ν•œ 깊이 μžˆλŠ” λΆ„μ„μ΄λ‚˜ λ‹€λ₯Έ ν”„λ ˆμž„μ›Œν¬μ™€μ˜ 직접적인 의견 좩돌(λͺ¨μˆœ)에 κ΄€ν•œ λ‚΄μš©μ€ 제곡된 λ¬Έμ„œμ—μ„œ ν™•μΈλ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. --- *Last updated: 2026-04-26*