[React] 리액트 useRef로 특정 DOM 선택하기

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

JavaScript로 측정 DOM을 선택할 때는 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택합니다. 리액트에서는 이와 같은 기능을 하는 useRef라는 Hook 함수가 있고, useRef 함수를 통해 특정 DOM을 선택할 수 있습니다.

 

먼저 components파일에 UseRef.jsx라는 컴포넌트를 생성하고 App.jsx에서 UseRef 컴포넌트를 렌더링 해보겠습니다.

App.jsx

import React from "react";
import UseRef from "./components/UseRef";

function App() {
  return (
    <>
      <UseRef></UseRef>
    </>
  );
}

export default App;

components/UseRef.jsx

import React, { useState, useRef } from "react";

function UseRef() {
  const [text, setText] = useState("");

  const displayText = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
  };

  return (
    <div>
      <input onChange={displayText} value={text} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
}

export default UseRef;

여기서 초기화를 누를 시 포커스는 초기화 버튼에 그대로 남아있게 됩니다.

useRef 함수를 사용해서 초기화 버튼 클릭 시 input에 포커스가 잡히도록 구현해보겠습니다. 

 

components/UseRef.jsx

import React, { useState, useRef } from "react";

function UseRef() {
  const [text, setText] = useState("");

  const textInput = useRef();

  const displayText = (e) => {
    setText(e.target.value);
  };

  const onReset = () => {
    setText("");
    textInput.current.focus();
  };

  return (
    <div>
      <input onChange={displayText} value={text} ref={textInput} />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값 : {text}</b>
      </div>
    </div>
  );
}

export default UseRef;

 

const textInput = useRef();

useRef() 함수를 사용해서 Ref 객체 생성

 

<input onChange={displayText} value={text} ref={textInput} />

생성한 Ref 객체를 선택하고자 하는 DOM의 ref값으로 설정해주게 되면 Ref 객체의 .current값은 선택하고자 하는 DOM을 가리키게 됩니다.

 

const onReset = () => {
    setText("");
    textInput.current.focus();
  };

onReset 함수 호출 시 선택하고자 하는 DOM에 포커스 하는 focus() DOM API를 호출하게 됩니다.

 

 

 

📚참고

https://react.vlpt.us/basic/10-useRef.html