๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ ๋ฉ”๋‰ด ๋ฐ”๋กœ๊ฐ€๊ธฐ

butterwalnut

ํ”„๋กœํ•„์‚ฌ์ง„
  • ๊ธ€์“ฐ๊ธฐ
  • ๊ด€๋ฆฌ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก
  • RSS

butterwalnut

๊ฒ€์ƒ‰ํ•˜๊ธฐ ํผ
  • ๐Ÿ’Ž (28)
    • WIL (3)
    • TIL (21)
      • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (1)
      • Project (1)
      • ๋ฆฌ์•กํŠธ (9)
      • Javascript (8)
      • HTML & CSS (0)
      • API & ? (1)
    • ! (2)
    • ? (0)
  • ๋ฐฉ๋ช…๋ก

REF (1)
TIL/๋ฆฌ์•กํŠธ
TIL_๋ฆฌ์•กํŠธ # 4 | Ref

๋ฆฌ์•กํŠธ์—์„œ ๋”์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ ์˜ค๋Š” ๋ฐฉ๋ฒ•์ค‘ ํ•˜๋‚˜, Ref ๋ฆฌ์•กํŠธ๋Š” ๊ฐ€์ƒ DOM์„ ๋งŒ๋“ค๊ณ  ๊ทธ ์œ„์— ๊ทธ๋ ค์ง€๋Š” ๊ฒƒ ๊ทธ๋ƒฅ DOM์š”์†Œ์—์„œ ๊ฐ€์ ธ์˜ค๋ฉด ๋ฆฌ์•กํŠธ๊ฐ€ ๊ทธ๋ ค์ง€๊ธฐ ์ „๊นŒ์ง€๋Š” ๊ฐ€์ ธ์˜ฌ ์ˆ˜ ์žˆ๋Š”๊ฒŒ ์—†๋‹ค. ๋•Œ๋ฌธ์—, ๋ฆฌ์•กํŠธ์—์„œ DOM์š”์†Œ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ! input ์œผ๋กœ ๋ฆฌ์•กํŠธ์—์„œ Ref ์ƒ์„ฑํ•˜๊ธฐ 1. input ๋ชจ์–‘๋ถ€ํ„ฐ ๋งŒ๋“ค๊ธฐ 2. constructor ํ•จ์ˆ˜์•ˆ์—์„œ this.โ—‹โ—‹โ—‹ = React.createRef(); this.text = React.createRef; 3. input ํƒœ๊ทธ์— ref={this.text} 4. componentDidMount ํ•จ์ˆ˜๋กœ ์ž˜ ์ƒ์„ฑ๋๋Š”์ง€ ํ™•์ธ componentDidMount() { console.log(this.text); console.log(this.text.current); }

2021. 3. 23. 04:19
์ด์ „ 1 ๋‹ค์Œ
์ด์ „ ๋‹ค์Œ
๊ณต์ง€์‚ฌํ•ญ
  • ๋ฒ„ํ„ฐํ˜ธ๋‘์˜ ๊ฐœ๋ฐœ์ผ์ง€
์ตœ๊ทผ์— ์˜ฌ๋ผ์˜จ ๊ธ€
์ตœ๊ทผ์— ๋‹ฌ๋ฆฐ ๋Œ“๊ธ€
Total
Today
Yesterday
๋งํฌ
TAG
  • til
  • CRA
  • ์ƒํƒœ๊ด€๋ฆฌ
  • ์ฝ”์–ด์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • React
  • ํด๋ก ์ฝ”๋”ฉ
  • frontend
  • JavaScript
  • MDN
  • debounce
  • SCSS
  • ํ”„๋ก ํŠธ์—”๋“œ
  • ๋ฆฌ์•กํŠธ
  • ํŒŒ์ด์ฌ
  • OKU
  • infinityscroll
  • Throttle
  • ๋ฐฑ์ค€
  • ๋ฌดํ•œ์Šคํฌ๋กค
  • ์„œ๋ฒ„์‚ฌ์ด๋“œ
  • styled-components
  • react-redux
  • ๊ฐœ๋ฐœ์ž
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
  • ์‘๋‹ต
  • ํ•ญํ•ด99
  • ๋ธŒ๋ฃจํŠธํฌ์Šค
  • ์ฃผ๋‹ˆ์–ด์ฝ”๋”
  • Wil
more
ยซ   2025/07   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
๊ธ€ ๋ณด๊ด€ํ•จ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”