# [[MUI]] ## ๐Ÿ“Œ Brief Summary MUI(Material UI)๋Š” React ํ”„๋กœ์ ํŠธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋Œ€ํ‘œ์ ์ธ UI ์ปดํฌ๋„ŒํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค [1, 2]. ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์œ ์—ฐํ•˜๊ณ  ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด ๋ณตํ•ฉ ์ปดํฌ๋„ŒํŠธ(Compound Components) ํŒจํ„ด์„ ์ ๊ทน์ ์œผ๋กœ ํ™œ์šฉํ•ฉ๋‹ˆ๋‹ค [1]. ์†Œ์Šค ๋ฐ์ดํ„ฐ ๋‚ด์—์„œ๋Š” ์ฃผ๋กœ ์Šคํƒ€์ผ๋ง ๋„๊ตฌ์™€์˜ ํ˜ธํ™˜์„ฑ ์‚ฌ๋ก€๋‚˜ ๋””์ž์ธ ์‹œ์Šคํ…œ์˜ ์˜ˆ์‹œ๋กœ ๊ฐ„๋žตํ•˜๊ฒŒ ์–ธ๊ธ‰๋˜๋ฉฐ, ์‹ฌ์ธต์ ์ธ ์•„ํ‚คํ…์ฒ˜๋‚˜ ์ „๋ฐ˜์ ์ธ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ์ •๋ณด๋Š” ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. ## ๐Ÿ“– Core Content * **๋ณตํ•ฉ ์ปดํฌ๋„ŒํŠธ ํŒจํ„ด(Compound Components Pattern) ์ ์šฉ:** ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ UI๋ฅผ ๊ตฌ์ถ•ํ•  ๋•Œ ๋„๋ฆฌ ์“ฐ์ด๋Š” ๋ณตํ•ฉ ์ปดํฌ๋„ŒํŠธ ํŒจํ„ด์€ MUI์™€ ๊ฐ™์€ ์ˆ˜๋งŽ์€ UI ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์—์„œ ๋งค์šฐ ๊ฐ•๋ ฅํ•˜๊ฒŒ ์‚ฌ์šฉ๋˜๋Š” ํŒจํ„ด์ž…๋‹ˆ๋‹ค [1]. ์†Œ์Šค์—์„œ๋Š” ์ด ํŒจํ„ด์ด ์ ์šฉ๋œ ๊ตฌ์ฒด์ ์ธ ์ปดํฌ๋„ŒํŠธ ์‚ฌ๋ก€๋กœ 'MUI React Stepper'๋ฅผ ์–ธ๊ธ‰ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค [1]. * **styled-components์™€์˜ ํ˜ธํ™˜์„ฑ ์ฒ˜๋ฆฌ:** MUI๋Š” styled-components์™€ ๊ฐ™์€ CSS-in-JS ๋„๊ตฌ์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ๋  ๋•Œ ์ƒ์†๋œ ๊ธฐ๋ณธ๊ฐ’์„ ๋ฆฌ์…‹ํ•˜๊ธฐ ์œ„ํ•ด `undefined`๋ฅผ prop์œผ๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์„ ์ทจํ•ฉ๋‹ˆ๋‹ค [3]. styled-components ์ธก์—์„œ๋Š” v6.3.12 ๋ฆด๋ฆฌ์Šค๋ฅผ ํ†ตํ•ด ๋ช…์‹œ์ ์œผ๋กœ ์ „๋‹ฌ๋œ `undefined` prop์„ ๊ฐ•์ œ๋กœ ์ œ๊ฑฐํ•˜์ง€ ์•Š๊ณ  ๋ณด์กดํ•˜๋„๋ก ์ˆ˜์ •ํ•˜์—ฌ MUI(๋ฐ Radix UI)์™€์˜ ํ˜ธํ™˜์„ฑ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค [3]. * **๋””์ž์ธ ํ† ํฐ ๋ฐ ํ…Œ๋งˆ(Theming):** 2025๋…„ ๊ธฐ์ค€ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ UI ์‹œ์Šคํ…œ์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ€์ด๋“œ์—์„œ Material UI๋Š” ๋””์ž์ธ ํ† ํฐ(Design Tokens)๊ณผ UI ํ…Œ๋งˆ ์ ์šฉ์„ ํ†ตํ•ด ๋””์ž์ธ ์˜๋„(intent)์™€ ์˜ํ–ฅ(impact)์„ ๋ถ„๋ฆฌํ•˜์—ฌ ํ™•์žฅ ๊ฐ€๋Šฅํ•œ ์‹œ์Šคํ…œ์„ ๊ตฌ์„ฑํ•˜๋Š” ๋งฅ๋ฝ๊ณผ ํ•จ๊ป˜ ์–ธ๊ธ‰๋ฉ๋‹ˆ๋‹ค [2]. * **์ •๋ณด ๋ถ€์กฑ:** ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. ์ œ๊ณต๋œ ์†Œ์Šค์—์„œ๋Š” MUI์˜ ์ „๋ฐ˜์ ์ธ ์•„ํ‚คํ…์ฒ˜, ์„ฑ๋Šฅ ๋ฒค์น˜๋งˆํฌ, ๋˜๋Š” Tailwind CSS ๋“ฑ ๋‹ค๋ฅธ ์Šคํƒ€์ผ๋ง ์ ‘๊ทผ๋ฒ•๊ณผ์˜ ์ง์ ‘์ ์ธ ์žฅ๋‹จ์  ๋น„๊ต ๋“ฑ ๋ฃจํŠธ ์ฃผ์ œ์— ๋Œ€ํ•œ ๊ตฌ์ฒด์ ์ธ ์„ธ๋ถ€ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๊ณ  ์žˆ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ## ๐Ÿ”— Knowledge Connections - **Related Topics:** [[Compound Components]], [[styled-components]], [[Design Tokens]] - **Projects/Contexts:** [[UI Component Libraries]] - **Contradictions/Notes:** ์†Œ์Šค์— ๊ด€๋ จ ์ •๋ณด๊ฐ€ ๋ถ€์กฑํ•ฉ๋‹ˆ๋‹ค. MUI์— ๋Œ€ํ•œ ๊นŠ์ด ์žˆ๋Š” ๋ถ„์„์ด๋‚˜ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ์™€์˜ ์ง์ ‘์ ์ธ ์˜๊ฒฌ ์ถฉ๋Œ(๋ชจ์ˆœ)์— ๊ด€ํ•œ ๋‚ด์šฉ์€ ์ œ๊ณต๋œ ๋ฌธ์„œ์—์„œ ํ™•์ธ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. --- *Last updated: 2026-04-26*