# ๐Ÿผ [LEVEL 1] ๋ฆฌ์•กํŠธ์˜ ์‹ฌ์žฅ: UI๋Š” ์ƒํƒœ(State)์˜ ํ•จ์ˆ˜๋‹ค ## 1. ์ƒ๊ฐ์˜ ์ „ํ™˜: "์–ด๋–ป๊ฒŒ(How)"๊ฐ€ ์•„๋‹ˆ๋ผ "๋ฌด์—‡์„(What)" - **HTML/JS ๋ฐฉ์‹**: "๋ฒ„ํŠผ์„ ์ฐพ์•„์„œ, ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ๊ณ , ํ…์ŠคํŠธ๋ฅผ ๋ฐ”๊พผ๋‹ค." (๋ช…๋ นํ˜•) - **๋ฆฌ์•กํŠธ ๋ฐฉ์‹**: "์ƒํƒœ๊ฐ€ `ON`์ด๋ฉด '์ผœ์ง'์„ ๋ณด์—ฌ์ฃผ๊ณ , `OFF`์ด๋ฉด '๊บผ์ง'์„ ๋ณด์—ฌ์ค€๋‹ค." (์„ ์–ธํ˜•) - **๊ตํ›ˆ**: ์ค‘๊ธ‰ ์ฃผ๋‹ˆ์–ด๋Š” DOM์„ ์ง์ ‘ ๊ฑด๋“œ๋ฆฌ์ง€ ์•Š๋Š”๋‹ค. ์˜ค์ง **์ƒํƒœ**๋งŒ ๊ฑด๋“œ๋ฆฐ๋‹ค. ## 2. ๋ถˆ๋ณ€์„ฑ(Immutability): ์™œ `push`๋Š” ์•ˆ๋˜๋‚˜์š”? - ๋ฆฌ์•กํŠธ๋Š” "๊ฐ’์ด ๋ฐ”๋€Œ์—ˆ๋„ค?"๋ฅผ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๊ฐ’์œผ๋กœ ํŒ๋‹จํ•œ๋‹ค. - `arr.push(1)`์€ ์ฃผ์†Œ๋Š” ๊ทธ๋Œ€๋กœ๊ณ  ๋‚ด์šฉ๋งŒ ๋ฐ”๋€๋‹ค. ๋ฆฌ์•กํŠธ๋Š” ๋ฐ”๋€ ์ค„ ๋ชจ๋ฅธ๋‹ค! - **์ •๋‹ต**: `setArr([...arr, 1])` ์ฒ˜๋Ÿผ ํ•ญ์ƒ **์ƒˆ๋กœ์šด ๋ณต์‚ฌ๋ณธ**์„ ๋˜์ ธ๋ผ. ## 3. ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„: ๋ฌผ์€ ์œ„์—์„œ ์•„๋ž˜๋กœ ํ๋ฅธ๋‹ค. - ๋ถ€๋ชจ๊ฐ€ ์ž์‹์—๊ฒŒ ์ฃผ๋Š” ๊ฑด `Props`. ์ž์‹์ด ๋ถ€๋ชจ๋ฅผ ๋ฐ”๊พธ๋ ค๋ฉด ๋ถ€๋ชจ๊ฐ€ ์ค€ `ํ•จ์ˆ˜`๋ฅผ ํ˜ธ์ถœํ•˜๋ผ. - **ํ•˜์ง€ ๋ง ๊ฒƒ**: ์ž์‹์ด ๋ถ€๋ชจ์˜ ์ƒํƒœ๋ฅผ ๋ชฐ๋ž˜ ๋ฐ”๊พธ๋Š” '๋งค์ง'์€ ์‹œ์Šคํ…œ์„ ๋ง์นœ๋‹ค.