React: [๋ฌธ์„œ] [์งˆ๋ฌธ] Refs - ์ฝœ๋ฐฑ ๋Œ€ ๋ฌธ์ž์—ด

์— ๋งŒ๋“  2016๋…„ 03์›” 11์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: facebook/react

๋ฌธ์„œ๋ฅผ ๋‹ค์‹œ ์ฝ๊ณ  ์žˆ์—ˆ๋Š”๋ฐ ref๋ฅผ ์ฝœ๋ฐฑ์œผ๋กœ ์ •์˜ํ•˜๋Š” ๊ฒƒ๊ณผ ๋ฌธ์ž์—ด๋กœ ์ •์˜ํ•˜๋Š” ๊ฒƒ์˜ ์ฐจ์ด์ ์ด ๋ช…ํ™•ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

<input ref={input => this._input = input} /> ๋Œ€ <input ref="input" />

๋ˆ„๊ตฐ๊ฐ€ ๋‚˜์—๊ฒŒ ๋ช…ํ™•ํžˆ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ref๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ •์˜ํ•˜๋ฉด this.refs ๊ฐœ์ฒด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(์˜ˆ: this.refs.input .
์ฝœ๋ฐฑ ์ฐธ์กฐ๋ฅผ ์ •์˜ํ•˜๋ฉด ์›ํ•˜๋Š” ๊ฒฝ์šฐ this ์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•˜์—ฌ ๋ฌด์—‡์ด๋“  ์ž์œ ๋กญ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์ž์—ด refs๋Š” ๊ฒฐ๊ตญ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฝœ๋ฐฑ ์ฐธ์กฐ๋Š” ๋‚˜์ค‘์— ๋„์ž…๋˜์—ˆ์ง€๋งŒ ๋ฌธ์ž์—ด ์ฐธ์กฐ์˜ ๋ชจ๋“  ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋‹ค๋ฃจ๋ฉฐ ์ผ๋ถ€ ๋‹จ์ ์ด ์—†์Šต๋‹ˆ๋‹ค. ์ž‘์„ฑํ•˜๋Š” ์ƒˆ ์ฝ”๋“œ์—์„œ ํ•ญ์ƒ ์ฝœ๋ฐฑ ์ฐธ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ StackOverflow์— ์งˆ๋ฌธํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค. ์šฐ๋ฆฌ๋Š” ๊ณต์‹์ ์œผ๋กœ ์ด์Šˆ ํŠธ๋ž˜์ปค๋ฅผ ์ง€์› ํฌ๋Ÿผ์œผ๋กœ ๊ฐ„์ฃผํ•˜์ง€ ์•Š์œผ๋ฉฐ, ๋ถˆํ–‰ํžˆ๋„ GitHub ๊ฒ€์ƒ‰์€ StackOverflow ๊ฒ€์ƒ‰๋งŒํผ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ˆ„๊ตฐ๊ฐ€ ๋‹ค์‹œ ์งˆ๋ฌธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— ์ด๊ฒƒ์„ StackOverflow์— ๊ฒŒ์‹œํ–ˆ๋‹ค๋ฉด ์ข‹์€ ๋‹ต๋ณ€์„ ์–ป์„ ์ˆ˜ ์žˆ๊ณ , ๊ท€ํ•˜์˜ ์งˆ๋ฌธ์— ํˆฌํ‘œ๊ฐ€ ๋˜์—ˆ์„ ๊ฒƒ์ด๋ฉฐ, ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์•ž์œผ๋กœ ๊ทธ๊ฒƒ์„ ๋ฐฐ์šฐ๊ณ  ์ฐพ์•˜์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

ref๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ •์˜ํ•˜๋ฉด this.refs ๊ฐœ์ฒด์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(์˜ˆ: this.refs.input .
์ฝœ๋ฐฑ ์ฐธ์กฐ๋ฅผ ์ •์˜ํ•˜๋ฉด ์›ํ•˜๋Š” ๊ฒฝ์šฐ this ์— ์ €์žฅํ•˜๋Š” ๊ฒƒ์„ ํฌํ•จํ•˜์—ฌ ๋ฌด์—‡์ด๋“  ์ž์œ ๋กญ๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฌธ์ž์—ด refs๋Š” ๊ฒฐ๊ตญ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ฝœ๋ฐฑ ์ฐธ์กฐ๋Š” ๋‚˜์ค‘์— ๋„์ž…๋˜์—ˆ์ง€๋งŒ ๋ฌธ์ž์—ด ์ฐธ์กฐ์˜ ๋ชจ๋“  ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋‹ค๋ฃจ๋ฉฐ ์ผ๋ถ€ ๋‹จ์ ์ด ์—†์Šต๋‹ˆ๋‹ค. ์ž‘์„ฑํ•˜๋Š” ์ƒˆ ์ฝ”๋“œ์—์„œ ํ•ญ์ƒ ์ฝœ๋ฐฑ ์ฐธ์กฐ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

์•ž์œผ๋กœ StackOverflow์— ์งˆ๋ฌธํ•˜๋Š” ๊ฒƒ์„ ๊ณ ๋ คํ•˜์‹ญ์‹œ์˜ค. ์šฐ๋ฆฌ๋Š” ๊ณต์‹์ ์œผ๋กœ ์ด์Šˆ ํŠธ๋ž˜์ปค๋ฅผ ์ง€์› ํฌ๋Ÿผ์œผ๋กœ ๊ฐ„์ฃผํ•˜์ง€ ์•Š์œผ๋ฉฐ, ๋ถˆํ–‰ํžˆ๋„ GitHub ๊ฒ€์ƒ‰์€ StackOverflow ๊ฒ€์ƒ‰๋งŒํผ ์ž‘๋™ํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋ˆ„๊ตฐ๊ฐ€ ๋‹ค์‹œ ์งˆ๋ฌธํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋ฐ˜๋ฉด์— ์ด๊ฒƒ์„ StackOverflow์— ๊ฒŒ์‹œํ–ˆ๋‹ค๋ฉด ์ข‹์€ ๋‹ต๋ณ€์„ ์–ป์„ ์ˆ˜ ์žˆ๊ณ , ๊ท€ํ•˜์˜ ์งˆ๋ฌธ์— ํˆฌํ‘œ๊ฐ€ ๋˜์—ˆ์„ ๊ฒƒ์ด๋ฉฐ, ๋” ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ์•ž์œผ๋กœ ๊ทธ๊ฒƒ์„ ๋ฐฐ์šฐ๊ณ  ์ฐพ์•˜์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

@gaearon๋‹˜ ๋‹ค์‹œํ•œ๋ฒˆ ๊ฐ์‚ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ๋‹ค์Œ์—๋Š” StackOverflow๋ฅผ ์‚ฌ์šฉํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๊ดœ์ฐฎ์•„์š”! ์šฐ๋ฆฌ๊ฐ€ ์ƒˆ ์ฝ”๋“œ์—์„œ ์ฝœ๋ฐฑ ์ฐธ์กฐ ํŒจํ„ด์„ ๊ถŒ์žฅํ•œ๋‹ค๋Š” ๊ฒƒ์„ ๋” ๋ถ„๋ช…ํ•˜๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐ๋˜๋ฉด ๋ฌธ์„œ์— ํ’€ ๋ฆฌํ€˜์ŠคํŠธ๋ฅผ ์ œ์ถœํ•ด ์ฃผ์‹ญ์‹œ์˜ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰