๐Ÿ™ŠReact ์ปดํฌ๋„ŒํŠธ์— ref prop์„ ๋„˜๊ฒจ์„œ
๊ทธ ๋‚ด๋ถ€์— ์žˆ๋Š” HTML ์—˜๋ฆฌ๋จผํŠธ์— ์ ‘๊ทผ์„ ํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜ ์•Œ์•„๋ณด์žโ—

input์— ํฌ์ปค์Šค ์ฃผ๋ ค๋ฉด ํด๋ฆญํ•ด์•ผ ์ž๋™์œผ๋กœ ๋˜๋Š”๋ฐ

๐Ÿ–ฑ๋ฒ„ํŠผ ํด๋ฆญํ–ˆ์„ ๋•Œ ํฌ์ปค์Šค ๋˜๊ฒŒ ํ•˜๋ ค๋ฉด
JS์—์„  ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒโ“

๋ฆฌ์•กํŠธ
๐Ÿ‘‰ ํด๋ฆญํ–ˆ์„ ๋•Œ input์— ํฌ์ปค์Šค ๋˜๊ฒŒ ํ•˜๊ณ  ์‹ถ์€๋ฐ

๐Ÿค”..์—ฌ๊ธฐ์„œ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ•˜๋ฉด ๋ ๊นŒโ“

input ํƒœ๊ทธ์— ref ๋“ฑ๋กํ•˜๋ฉด ์ € input ๋ถ€๋ถ„์ด
inputRef์˜ current์— ๋“ค์–ด์žˆ๊ฒŒ ๋จโœ…
โฌ‡

ํด๋ฆญํ•˜๋ฉด ํฌ์ปค์Šค ์ž˜ ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ์Œ๐Ÿ‘€

components>ChildComponent.js

App.js ์—์„œ ๋ฐ‘์ค„ ์นœ ๋ถ€๋ถ„์„ ChildComponent๋กœ ๋ณด๋‚ผ ๊ฒƒโ—

ChildComponent ์ปดํฌ๋„ŒํŠธ ํƒœ๊ทธ ๋„ฃ์–ด์ฃผ๊ณ 

์ € ๋ถ€๋ถ„์„ ChildComponent์— ๋„ฃ์–ด์ฃผ๊ณ 

โฌ‡ inputRef๋Š” App ์ปดํฌ๋„ŒํŠธ์— ์žˆ์œผ๋‹ˆ ๋‚ด๋ ค์ค˜์•ผ ํ•จ

ChildComponent์— ref ๊ฐ€์ ธ์™€์„œ

ref ๋„ฃ์–ด์คŒ

โš Warning ์ฝ˜์†”์ฐฝ์— ๋œธ

ChildComponent: 'ref' is not a prop
๐Ÿ‘‰ ref ๋ผ๋Š” ๊ฒƒ์„ ์ €๋ ‡๊ฒŒ ({ ref }) ๋‚ด๋ ค์ค„ ์ˆ˜ ์—†์Œ๐Ÿ™…โ€โ™€๏ธ


๐Ÿ’โ€โ™€๏ธforwardRef ์‚ฌ์šฉํ•˜๊ธฐ

ChildComponent(์ž๋…€) ์ปดํฌ๋„ŒํŠธ์—์„œforwardRef๋กœ ๊ฐ์‹ธ์ฃผ๊ธฐ

๊ทธ๋ž˜๋„ Warning ๋œธ

ChildComponent ํ•จ์ˆ˜๋Š” ๋‘ ๊ฐœ์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐ›์Œโžกprops & ref

โฌ‡

์ด์   ๊ฒฝ๊ณ  ์•ˆ ๋œจ๊ณ  ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์ž˜ ๋จโœจ

profile
์•ˆ๋…•ํ•˜์„ธ์š”! ํผ๋ธ”๋ฆฌ์‹ฑ & ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ ๊ณต๋ถ€ ๋ธ”๋กœ๊ทธ ์ž…๋‹ˆ๋‹ค!

0๊ฐœ์˜ ๋Œ“๊ธ€