State๋ฐ”๊พธ๊ธฐ

ยท React
๋ฆฌ๋™์ ์ธ UI ๊ฐ€ ๋ญ๋‚˜๋ฉด, ์œ ์ €๊ฐ€ ์กฐ์ž‘์‹œ ํ˜•ํƒœ๊ฐ€ ๋ฐ”๋€Œ๋Š” ๋ชจ๋‹ฌ์ฐฝ, ํƒญ, ์„œ๋ธŒ๋ฉ”๋‰ด, ํˆดํŒ, ๊ฒฝ๊ณ ๋ฌธ ๋“ฑ ๊ทธ๋Ÿฐ UI๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ๋™์ ์ธ UI ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• 1. html, css๋กœ ๋ฏธ๋ฆฌ UI ๋””์ž์ธ์„ ๋‹ค ํ•ด๋†“๊ณ  2. UI์˜ ํ˜„์žฌ์ƒํƒœ๋ฅผ state ๋กœ ์ €์žฅํ•ด๋‘๊ณ  3. state์— ๋”ฐ๋ผ์„œ UI ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณด์ผ์ง€ ์กฐ๊ฑด๋ฌธ ๋“ฑ์œผ๋กœ ์ž‘์„ฑ 1๋ฒˆ์€ ํ–ˆ์œผ๋‹ˆ 2๋ฒˆ๋ถ€ํ„ฐ ํ• ๊ฑฐ์ž„ step 2. UI์˜ ํ˜„์žฌ์ƒํƒœ๋ฅผ state๋กœ ์ €์žฅ state ํ•˜๋‚˜ ๋งŒ๋“ค๊ณ , ๊ฑฐ๊ธฐ์— ํ˜„์žฌ UI์˜ ์ƒํƒœ์ •๋ณด๋ฅผ ์ €์žฅํ•ด๋‘๋ผ๋Š” ์†Œ๋ฆฌ let [modal, setModal] = useState(false); useState ์•ˆ์— ๋ฌด์Šจ ์ž๋ฃŒ๋ฅผ ๋„ฃ์–ด์•ผ ๋˜๋ƒ๋ฉด ์ •๋ง ๋งˆ์Œ๋Œ€๋กœ ํ•˜๋ฉด๋จ ๋ชจ๋‹ฌ์ฐฝ์€ ์—ด๋ฆผ or ๋‹ซํž˜ ์ด ๋‘๊ฐœ ์ƒํƒœ๋ฐ–์— ์—†๊ธฐ ๋•Œ๋ฌธ์— ๊ทธ๊ฑฐ 2์ข…๋ฅ˜๋งŒ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒํ˜•์ด๋ฉด..
becky(์ง€์€)
'State๋ฐ”๊พธ๊ธฐ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก