useRefλ .current νλ‘νΌν°μ λ³κ²½ κ°λ₯ν κ°μ λ΄κ³ μλ βμμβμ κ°μ΅λλ€.
useRefλ λ§€λ² λ λλ§μ ν λ λμΌν ref κ°μ²΄λ₯Ό μ 곡νλ€λ κ²μ λλ€.
useRefλ λ΄μ©μ΄ λ³κ²½λ λ κ·Έκ²μ μλ €μ£Όμ§λ μλλ€λ κ²μ μ λ νμΈμ.
.current νλ‘νΌν°λ₯Ό λ³ννλ κ²μ΄ 리λ λλ§μ λ°μμν€μ§λ μμ΅λλ€.
useRefλ μ μ₯ 곡κ°κ³Ό DOMμμμ μ κ·Όμ μν΄ μ¬μ©λλ HOOKSμ
Stateκ° λ³ν λλ§λ€(useState) 리λ λλ§ λλ©΄μ μ»΄ν¬λνΈ λ΄λΆ λ³μλ€μ΄ μ΄κΈ°νλλλ°,
Refμμ μλ κ°μ μ무리 λ³κ²½ν΄λ μ»΄ν¬λνΈλ λ€μ λ λλ§ λμ§ μμ
μ¦, λΆνμν λ λλ§μ λ§μ μ μμ
λν μ무리 리λ λλ§μ΄ λμ΄λ refμμ μ μ₯λμ΄ μλ κ°μ λ³νλμ§ μκ³ μ μ§λ¨
λ°λΌμ λ³κ²½ μ λ λλ§μ λ°μμν€μ§λ§μμΌνλ κ°μ λ€λ₯Ό λ ref μ¬μ©
const App = () => {
const input = useRef<HTMLInputElement>(null);
const handleClick = () => {
if(input.current){
input.current.focus();
}
}
return (
<div>
<input type="text" ref={inpit} />
<button type="button" onClick={handleClick}>Click to Focus</button>
</div>
);
}