[React] useRef๋ž€?

๊น€์ง„์˜ยท2022๋…„ 8์›” 28์ผ
13

ReactJS

๋ชฉ๋ก ๋ณด๊ธฐ
4/8
post-thumbnail

๐Ÿ“‹ useRef๋ž€?

useRef ๋Š” .current ํ”„๋กœํผํ‹ฐ๋กœ ์ „๋‹ฌ๋œ ์ธ์ž(initialValue)๋กœ ์ดˆ๊ธฐํ™”๋œ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ref ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜๋œ ๊ฐ์ฒด๋Š” ์ปดํฌ๋„ŒํŠธ์˜ ์ „ ์ƒ์• ์ฃผ๊ธฐ๋ฅผ ํ†ตํ•ด ์œ ์ง€๋  ๊ฒƒ์ž…๋‹ˆ๋‹ค. - React ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€

useRef๋Š” ์ €์žฅ๊ณต๊ฐ„ ๋˜๋Š” DOM์š”์†Œ์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” React Hook์ด๋‹ค. ์—ฌ๊ธฐ์„œ Ref๋Š” reference, ์ฆ‰ ์ฐธ์กฐ๋ฅผ ๋œปํ•œ๋‹ค.

์šฐ๋ฆฌ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉ ํ•  ๋•Œ์—๋Š”, ์šฐ๋ฆฌ๊ฐ€ ํŠน์ • DOM ์„ ์„ ํƒํ•˜๊ธฐ ์œ„ํ•ด์„œ querySelector ๋“ฑ์˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

React๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํ”„๋กœ์ ํŠธ์—์„œ๋„ ๊ฐ€๋”์”ฉ DOM ์„ ์ง์ ‘ ์„ ํƒํ•ด์•ผ ํ•˜๋Š” ์ƒํ™ฉ์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ๋Ÿด๋•Œ ์šฐ๋ฆฌ๋Š” useRef๋ผ๋Š” React Hook์„ ์‚ฌ์šฉํ•œ๋‹ค.

์•„์ง ์„ค๋ช…๋งŒ์œผ๋กœ๋Š” ๊ฐ์ด ์ž˜ ์•ˆ์˜ฌ ์ˆ˜ ์žˆ๋Š”๋ฐ ์‚ฌ์šฉ ์˜ˆ์‹œ๋ฅผ ํ•จ๊ป˜ ์‚ดํŽด๋ณด์ž.


๐Ÿ“Œ 1. useRef ์‚ฌ์šฉ ์˜ˆ์‹œ - ๋ณ€์ˆ˜ ๊ด€๋ฆฌ

(Open Sandbox๋ฅผ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ์™ผ์ชฝ ๋ฐ”๋ฅผ ๋•ก๊ธฐ๋ฉด ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.)

์—ฌ๊ธฐ useState๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ’์„ ์ €์žฅํ•œ stateCount, useRef๋ฅผ ์‚ฌ์šฉํ•ด ๊ฐ’์„ ์ €์žฅํ•œ refCount, ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด ๊ฐ’์„ ์ €์žฅํ•œ varCount๊ฐ€ ์žˆ๋‹ค.

ref up ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ๊ฐ๊ฐ์˜ ๊ฐ’์ด ์˜ฌ๋ผ๊ฐ€๊ณ  ์ฝ˜์†”์ฐฝ์— ์ถœ๋ ฅ์ด ๋˜๋Š” ํ˜•ํƒœ์ธ๋ฐ, ref up์„ ์•„๋ฌด๋ฆฌ ๋ˆŒ๋Ÿฌ๋„ ์ฝ˜์†”์ฐฝ์—๋งŒ ์ถœ๋ ฅ๋˜๊ณ  ํ™”๋ฉด์— ๋ Œ๋”๋ง์ด ๋˜์ง€ ์•Š๋Š”๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ state up ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด ํ™”๋ฉด์ด ๋ Œ๋”๋ง๋˜๋ฉด์„œ ์˜ฌ๋ ค๋†จ๋˜ refCount๊ฐ’๋„ ํ™”๋ฉด์— ์ถœ๋ ฅ๋˜๊ฒŒ ๋œ๋‹ค. ์ด๋ฅผ ํ†ตํ•ด ์šฐ๋ฆฌ๋Š” useRef๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฐ’์€ ๊ฐ’์ด ๋ณ€ํ•ด๋„ ํ™”๋ฉด์ด ๋ Œ๋”๋ง๋˜์ง€ ์•Š์Œ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๋˜ var up ๋ฒ„ํŠผ์„ ํ†ตํ•ด ๋ณ€์ˆซ๊ฐ’์„ ์•„๋ฌด๋ฆฌ ๋†’ํ˜€๋†”๋„ state up ๋ฒ„ํŠผ์„ ํ†ตํ•ด ๋ Œ๋”๋ง์„ ํ•œ๋‹ค๋ฉด, ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์— ์žˆ๋Š” let varCount = 0; ์ด ๊ณ„์† ์‹คํ–‰๋˜๊ธฐ์— ๊ฐ’์ด ์ดˆ๊ธฐํ™”๋œ๋‹ค.

useRef๊ฐ€ ์œ ์šฉํ•œ ์ƒํ™ฉ์€ ์ด๋Ÿฐ ์ƒํ™ฉ์ด ์žˆ๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด ๋‚ด ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ช‡๋ฒˆ ๋ Œ๋”๋ง๋๋Š”์ง€ ์•Œ๊ณ ์‹ถ์€ ์ƒํ™ฉ์ด๋ผ๊ณ  ํ•ด๋ณด์ž.

function App() {
  const [count, setCount] = useState(1);
  const [renderingCount, setRedneringCount] = useState(1);
 
  useEffect(() => {
    console.log("rendering Count : ", renderingCount);
    setRedneringCount(renderingCount + 1);
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}

์ด๋ ‡๊ฒŒ ๋กœ์ง์„ ์งœ๋ฉด, useEffect ์•ˆ์—์žˆ๋Š” setRenderingCount()๊ฐ€ ๊ณ„์†ํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•ด์„œ ๋ฌดํ•œ ๋ฃจํ”„์— ๋น ์ง€๊ฒŒ ๋œ๋‹ค.

์ด๋ฅผ useRef๋ฅผ ํ†ตํ•ด ํšจ์œจ์ ์œผ๋กœ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.

function App() {
  const [count, setCount] = useState(1);
  const renderingCount = useRef(1);

  useEffect(() => {
    console.log("renderingCount : ", renderingCount.current);
    ++renderingCount.current;
  });

  return (
    <div>
      <div>Count : {count}</div>
      <button onClick={() => setCount(count + 1)}> count up </button>
    </div>
  );
}

๐Ÿ“Œ 2. useRef ์‚ฌ์šฉ ์˜ˆ์‹œ - DOM ์š”์†Œ ์„ ํƒ

์ตœ์‹  ์›น์‚ฌ์ดํŠธ๋“ค์„ ๋ณด๋ฉด ๋กœ๊ทธ์ธ ํ™”๋ฉด์— ๋“ค์–ด๊ฐ€์ž๋งˆ์ž ์•„์ด๋”” input์— ํฌ์ปค์Šค๋˜์–ด์žˆ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋Œ€๋ถ€๋ถ„์ด๋‹ค.

์ด๋ฅผ useRef๋ฅผ ํ†ตํ•ด DOM์š”์†Œ๋ฅผ ์„ ํƒํ•˜์—ฌ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.

(Open Sandbox๋ฅผ ๋ˆ„๋ฅด๊ฑฐ๋‚˜ ์™ผ์ชฝ ๋ฐ”๋ฅผ ๋•ก๊ธฐ๋ฉด ์ฝ”๋“œ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.)

focus๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด input ์ฐฝ์— focus๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

useRef๋ฅผ ํ†ตํ•ด ๋งˆ์šดํŠธ๋  ๋•Œ focus๋˜๊ฒŒ ์„ค์ •ํ•ด๋†“์„ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์ด๋ผ๋Š” ํ™˜๊ฒฝ ์ƒ, ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด focus๋˜๋„๋ก ์„ค์ •ํ•ด๋†“์•˜๋‹ค.

๋˜ focus ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  ์ฝ˜์†”์ฐฝ์— useRef๋ฅผ ํ†ตํ•ด ์„ ํƒ๋œ DOM ์š”์†Œ๋ฅผ ํ™•์ธํ• ์ˆ˜ ์žˆ๋„๋ก ํ•ด๋†“์•˜์œผ๋‹ˆ ํ•œ๋ฒˆ์ฏค ํ™•์ธํ•ด๋ณด๋ฉด ์ข‹์„ ๋“ฏ ํ•˜๋‹ค.

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

comment-user-thumbnail
2022๋…„ 8์›” 28์ผ

๐Ÿคทโ€โ™‚๏ธ

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2023๋…„ 12์›” 8์ผ

์ข‹์€ ์˜ˆ์‹œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!
useRef์— ๋Œ€ํ•ด์„œ ์• -๋งคํ•˜๊ฒŒ๋งŒ ์•„๋Š” ์ƒํƒœ์˜€๋Š”๋ฐ, useState๋ž‘ ๋ณ€์ˆ˜๋ž‘ ๊ฐ™์ด ๋น„๊ตํ•ด์„œ ์˜ˆ์‹œ๋ฅผ ๋ณด๋‹ˆ ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„ค์š”, ๋•๋ถ„์— ๋ฌธ์ œ ํ•ด๊ฒฐํ•˜๊ณ  ๊ฐ‘๋‹ˆ๋‹ค ์•ผํ˜ธ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ
comment-user-thumbnail
2023๋…„ 12์›” 15์ผ

์ข‹์€ ์ •๋ณด ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค~

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ