useRef
๋ .current ํ๋กํผํฐ๋ก ์ ๋ฌ๋ ์ธ์(initialValue)๋ก ์ด๊ธฐํ๋ ๋ณ๊ฒฝ ๊ฐ๋ฅํ ref ๊ฐ์ฒด๋ฅผ ๋ฐํํฉ๋๋ค. ๋ฐํ๋ ๊ฐ์ฒด๋ ์ปดํฌ๋ํธ์ ์ ์์ ์ฃผ๊ธฐ๋ฅผ ํตํด ์ ์ง๋ ๊ฒ์ ๋๋ค. - React ๊ณต์ ํํ์ด์ง
useRef๋ ์ ์ฅ๊ณต๊ฐ ๋๋ DOM์์์ ์ ๊ทผํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ React Hook์ด๋ค. ์ฌ๊ธฐ์ Ref๋ reference, ์ฆ ์ฐธ์กฐ๋ฅผ ๋ปํ๋ค.
์ฐ๋ฆฌ๊ฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉ ํ ๋์๋, ์ฐ๋ฆฌ๊ฐ ํน์ DOM ์ ์ ํํ๊ธฐ ์ํด์ querySelector ๋ฑ์ ํจ์๋ฅผ ์ฌ์ฉํ๋ค.
React๋ฅผ ์ฌ์ฉํ๋ ํ๋ก์ ํธ์์๋ ๊ฐ๋์ฉ DOM ์ ์ง์ ์ ํํด์ผ ํ๋ ์ํฉ์ด ํ์ํ๋ค. ๊ทธ๋ด๋ ์ฐ๋ฆฌ๋ useRef๋ผ๋ React Hook์ ์ฌ์ฉํ๋ค.
์์ง ์ค๋ช ๋ง์ผ๋ก๋ ๊ฐ์ด ์ ์์ฌ ์ ์๋๋ฐ ์ฌ์ฉ ์์๋ฅผ ํจ๊ป ์ดํด๋ณด์.
(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>
);
}
์ต์ ์น์ฌ์ดํธ๋ค์ ๋ณด๋ฉด ๋ก๊ทธ์ธ ํ๋ฉด์ ๋ค์ด๊ฐ์๋ง์ ์์ด๋ input์ ํฌ์ปค์ค๋์ด์๋ ๊ฒฝ์ฐ๊ฐ ๋๋ถ๋ถ์ด๋ค.
์ด๋ฅผ useRef๋ฅผ ํตํด DOM์์๋ฅผ ์ ํํ์ฌ ๊ตฌํํ ์ ์๋ค.
(Open Sandbox๋ฅผ ๋๋ฅด๊ฑฐ๋ ์ผ์ชฝ ๋ฐ๋ฅผ ๋ก๊ธฐ๋ฉด ์ฝ๋๋ฅผ ํ์ธํ ์ ์๋ค.)
focus๋ฒํผ์ ๋๋ฅด๋ฉด input ์ฐฝ์ focus๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค.
useRef๋ฅผ ํตํด ๋ง์ดํธ๋ ๋ focus๋๊ฒ ์ค์ ํด๋์ ์๋ ์์ง๋ง ๋ธ๋ก๊ทธ ํฌ์คํ ์ด๋ผ๋ ํ๊ฒฝ ์, ๋ฒํผ์ ๋๋ฅด๋ฉด focus๋๋๋ก ์ค์ ํด๋์๋ค.
๋ focus ๋ฒํผ์ ๋๋ฅด๊ณ ์ฝ์์ฐฝ์ useRef๋ฅผ ํตํด ์ ํ๋ DOM ์์๋ฅผ ํ์ธํ ์ ์๋๋ก ํด๋์์ผ๋ ํ๋ฒ์ฏค ํ์ธํด๋ณด๋ฉด ์ข์ ๋ฏ ํ๋ค.
๐คทโโ๏ธ