[React] Ref 사용하여 DOM 요소에 접근하기 - useRef()

1. Ref란?

React에서 DOM에 직접 접근하기 위해 사용한다.

HTML로 예를 들자면, <div id="div-id">에 접근하고 싶을 때 "div-id"라는 id를 사용하여 DOM 요소에 접근한다.

HTML을 작성할 때 id로 DOM 요소를 접근하는 것처럼, React에서도 DOM 요소에 직접 접근하기 위해 사용하는 것이 Ref이다.

---

2. Ref 사용하기

아래 예제는 "활성화" 버튼을 클릭하면 비활성화(disabled) 되어 있던 input이 활성화되고,

"초기화"버튼을 클릭하면 원래의 상태로 input을 비활성화 되는 <input> Element를 제어하는 코드이다.

import { useRef } from "react";

const Field = () => {
    const inputRef = useRef(null);
    
    const focusHandler = () => {
    	inputRef.current.disabled = false;
        inputRef.current.focus();
    };
    
    const resetHandler = () => {
    	inputRef.current.disabled = true;
        inputRef.current.value = "";
    };
    
    return(
    	<>
            <input type="text" ref={inputRef} disabled />
            <button onClick={focusHandler}>활성화</button>
            <button onClick={resetHandler}>초기화</button>
        </>
    );
};

 

 

1️⃣ useRef()라는 Hook을 사용하기 위해 import하기

import { useRef } from "react";

 

 

2️⃣ useRef() Hook을 사용하여 inputRef 객체 생성하기

const inputRef = useRef(null);

 

 

3️⃣ <input> Element에 prop을 통해 ref 값 넘기기

<input type="text" ref={inputRef} disabled />

📌 inputRef 객체의 current 속성에 <input> Element의 레퍼런스(ref)가 저장된다.

 

 

4️⃣ inputRef 객체를 통해 <input> Element 제어하기

const focusHandler = () => {
    inputRef.current.disabled = false;
    inputRef.current.focus();
};

const resetHandler = () => {
    inputRef.current.disabled = true;
    inputRef.current.value = "";
};