header-img
Info :
useRef 1
DOM ์กฐ์ž‘์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” "useRef" 2
2023.11.01
์ปดํฌ๋„ŒํŠธ์˜ ์†์„ฑ ๊ฐ’์„ ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜๋„ ์žˆ๊ณ , value๋‚˜ style ๊ฐ’ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ๋ฐ”๊ฟ”์ค„ ์ˆ˜๋„ ์žˆ๋Š”. DOM์„ ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ref. ๋ Œ๋”๋ง์— ํ•„์š”ํ•˜์ง€ ์•Š์€ ๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋Š” ref. ์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค. โ€‹ ref ๋Š” ๋น„๊ต์  ๊ฐ„๋‹จํ•œ ๊ฐœ๋…์ด๋ฏ€๋กœ forwardRef ์™€ useImperativeHandle ๋ฅผ ์„ค๋ช…ํ•˜๊ธฐ ์œ„ํ•œ ๋„์•ฝ ๋‹จ๊ณ„์ฒ˜๋Ÿผ ๊ฐ€๋ณ๊ฒŒ ์งš๊ณ  ๋„˜์–ด๊ฐ€๋„๋ก ํ•˜๊ฒ ์Œ. โ€‹ ๋ง๋ถ™ํžˆ๋Š” ๋ง.. ๋ชจ ๋ถ€์žฅ์˜ "Ref ๋Š” React ์ƒ๋ช…์ฃผ๊ธฐ์™€ ์–ด์šธ๋ฆฌ์ง€ ์•Š๋Š” ๋ฌธ๋ฒ•์œผ๋กœ React ์ƒ์—์„œ๋„ ์ง€์–‘ํ•ด์•ผ ํ•œ๋‹ค"๋Š” ๋ฐœ์–ธ์— ๋Œ€ํ•˜์—ฌ ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค. Ref ๋ฅผ ๋ฌด๋ถ„๋ณ„ํ•˜๊ฒŒ ์„ ์–ธํ•˜๊ณ , ๋‹ค๋ฅธ ๋ฌธ๋ฒ•์œผ๋กœ ๋Œ€์ฒด๊ฐ€ ๊ฐ€๋Šฅํ•œ๋ฐ๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋ฌด์ง€์„ฑ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฌธ์ œ. (์ด๊ฒƒ์€ ๋‹ค๋ฅธ ๋ฌธ๋ฒ•๋„ ๋™์ผํ•˜๋‹ค. ๊ฐ์ž๊ฐ€ ๊ฐ€์ง€๋Š” ๊ณ ์œ ์˜ ํŠน์„ฑ์„..