728x90
๋ฐ˜์‘ํ˜•

๋น„๋™๊ธฐ 2

React] Hook : useState ๋น„๋™๊ธฐ → ๋™๊ธฐ ํ•˜๋Š” ๋ฒ•

๋ณธ์ธ์ด ์ž‘์„ฑํ•œ ํ๋ฆ„ ๋”ฐ๋ผ ๊ฐ’์ด ๋ณ€ํ•  ๊ฒƒ์œผ๋กœ ์˜ˆ์ƒํ•˜๊ณ  setState๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ, ๋ฐ”๋กœ ๋‹ค์Œ์ค„์— ๊ฐ’์ด ๋ณ€ํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ์ข…์ข… ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Š” useState์„ค๋ช…ํ•  ๋•Œ์ฒ˜๋Ÿผ ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. (๊ด€๋ จ ์„ค๋ช…์€ ์•„๋ž˜ ๊ธ€ ํ™•์ธํ•˜์‹œ๋ฉด ๋  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.) 2023.06.04 - [Front-End/React] - React] React ๋ž€...? 2023.06.06 - [Front-End/React] - Hook) useState ๊ทธ๋ ‡๋‹ค๋ฉด useState๋ฅผ ๋™๊ธฐ๋กœ ์ฒ˜๋ฆฌํ•˜๋ ค๋ฉด ์–ด๋–ป๊ฒŒ ํ•ด์•ผ ๋ ์ง€ 2๊ฐ€์ง€ ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. useEffect ์‚ฌ์šฉ HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค useEffect๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์˜์กด์„ฑ์„ ๋ถ€์—ฌํ•˜๊ณ , content๊ฐ€ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ๊ฐฑ์‹ ํ•ด ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. 2023.06.20..

Front-End/React 2023.06.22

React] Hook : useState

useState Component๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์ƒํƒœ๊ฐ’์œผ๋กœ ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ์˜ ๋™์  ๋ฐ์ดํ„ฐ์ž…๋‹ˆ๋‹ค. ํ”ํžˆ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ๋ณ€์ˆ˜๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด๋˜์ง€๋งŒ, ์•„๋ž˜์™€๊ฐ™์€ ํŠน์ง•์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ณ€์ˆ˜๋ž‘์€ ๋Š๋‚Œ๋งŒ ๊ฐ™์ง€ ๋งŽ์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค. const [๋ณ€์ˆ˜์ด๋ฆ„, set๋ณ€์ˆ˜์ด๋ฆ„] = useState(์ดˆ๊ธฐ๊ฐ’); set๋ณ€์ˆ˜์ด๋ฆ„์€ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๋„ฃ์–ด๋„ ๋˜๊ณ , ์„ ์–ธํ•˜์ง€ ์•Š์•„๋„ ์ƒ๊ด€์—†์Šต๋‹ˆ๋‹ค. ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ง์ ‘ ๋Œ€์ž…ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, set์„ ํ†ตํ•ด ๊ฐ’์„ ๋Œ€์ž…ํ•ด์ค๋‹ˆ๋‹ค. state๊ฐ’์ด ๋ณ€ํ•˜๊ฒŒ ๋˜๋ฉด UI๊ฐ€ ๋ฆฌ๋ Œ๋”๋ง ๋œ๋‹ค. useState๋Š” ๋น„๋™๊ธฐ๋กœ ๋™์ž‘ํ•œ๋‹ค. ์˜ˆ HTML ์‚ฝ์ž… ๋ฏธ๋ฆฌ๋ณด๊ธฐํ•  ์ˆ˜ ์—†๋Š” ์†Œ์Šค inputํƒœ๊ทธ์˜ ๊ฐ’์„ ์ž…๋ ฅํ•ด ์ฃผ๋ฉด์„œ content๋ผ๋Š” state๊ฐ’์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ž‘์„ฑํ•˜์˜€๋‹ค. content์„ ์–ธํ•  ๋•Œ๋Š” "" ๋นˆ๋ฌธ์ž์—ด๋กœ ์ดˆ๊ธฐ๊ฐ’์„ ์„ค์ •ํ•ด..

Front-End/React 2023.06.06
728x90
๋ฐ˜์‘ํ˜•