728x90
๋ฐ˜์‘ํ˜•

๋™์ž‘์›๋ฆฌ 2

React] Mount & Rerender (LifeSycle)

React๋ฅผ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ, ํ™”๋ฉด์ด ๊ทธ๋ ค์ง€๋Š” ๋™์ž‘ ์ˆœ์„œ์™€ ํ™”๋ฉด์„ ๋‹ค์‹œ ๊ทธ๋ฆฌ๊ฒŒ ๋˜๋Š” ๋ฆฌ๋ Œ๋”๋ง ์ˆœ์„œ์ž…๋‹ˆ๋‹ค. Mount (๋งˆ์šดํŠธ) ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ์„ฑ๋˜์–ด ๋ Œ๋”๋ง ๋˜๋Š” ๊ณผ์ •์„ ๋งˆ์šดํŠธ๋ผ๊ณ  ํ•˜๋ฉฐ, ๋ Œ๋”๋ง ๋œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ญ์ œ๋˜๋Š” ๊ณผ์ •์„ Unmount(์–ธ๋งˆ์šดํŠธ)๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ํ˜ธ์ถœ ๊ตฌํ˜„๋ถ€ ์‹คํ–‰ props ์ „๋‹ฌ๋ฐ›๊ณ , hook ๋‚ด๋ถ€ ๋ณ€์ˆ˜, ํ•จ์ˆ˜ ์ƒ์„ฑ. (๋‚ด๋ถ€ ๋ณ€์ˆ˜ ๋ฐ ํ•จ์ˆ˜๋Š” hook์— ์žˆ๋Š” state๋‚˜ function์„ ์ œ์™ธ. ์ด๋“ค์€ ๋ณ„๋„๋กœ ๋ฉ”๋ชจ๋ฆฌ์— ์ €์žฅ๋˜์–ด ๊ด€๋ฆฌํ•จ.) ๊ฐ€์ƒ DOM์„ ์ƒ์„ฑ ์ปค๋ฐ‹ ์‹ค์ œ DOM์— ๋ฐ˜์˜ useLayoutEffect ํ™”๋ฉด์— Paint ํ•˜๊ธฐ ์ „์—, useLayoutEffect์— ๋“ฑ๋กํ•ด ๋‘” effect '๋™๊ธฐ'๋กœ ์‹คํ–‰๋œ๋‹ค. ์‹ค์ œ๋กœ ํ•ด๋‹น ํ›…์€ ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์œผ๋กœ ์•Œ๊ณ  ์žˆ์Œ. ๊ณต์‹ ๋ฌธ์„œ๋ฅผ ํ™•..

Front-End/React 2023.06.20

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
๋ฐ˜์‘ํ˜•