React(리액트): useRef로 특정 DOM 선택하기

HTML과 JavaScript를 사용할 때에는 우리가 특정 DOM을 선택해야 하는 상황에 getElementById() 또는 querySelector() 같은 DOM select 함수를 사용해서 DOM을 선택한다.

리액트를 사용하는 프로젝트에서도 가끔씩 DOM을 선택해야 하는 상황이 생길 수 있다. 예를 들어 특정 element의 

크기나 위치를 가져와야 하는 경우, 아니면 스크롤바 위치를 가져오거나 설정해야 하는 경우, 포커스를 설정해줘야 하는 경우 등 다양한 상황들이 있을 수 있다. Chart.js와 같은 그래프 관련 라이브러리를 사용하게 될 때에도 특정 DOM에

라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발생할 수 있다.

 

그럴 때는 리액트에서 'Ref'라는 것을 사용한다. 함수형 컴포넌트에서 Ref를 사용할 때는 'useRef'라는 hook 함수를 

사용한다. 클래스형 컴포넌트에서는 React.createRef()를 사용한다.

지금 당장은 함수형 컴포넌트에서 Ref를 사용하는 것에 대해서만 알아보겠다.

클래스형 컴포넌트는 나중에 다뤄볼 것인데, 지금 당장은 별로 중요하지 않기 때문이다.

 

 

InputSampl.js

이전에 만들었던 InputSample에서 초기화 버튼을 누르면 포커스가 '이름' input으로 가게 만들어보자.

이는 리액트 자체적인 기능으로는 구현할 수 없기 때문에 DOM 자체에 접근을 해야 한다. 

 

InputSample.js

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

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });
  const nameInput = useRef();
  const { name, nickname } = inputs;
  const onChange = (e) => {
    const { name, value } = e.target;

    setInputs({
      ...inputs,
      [name]: value,
    });
  };

  const onReset = () => {
    setInputs({
      name: "",
      nickname: "",
    });
    nameInput.current.focus();
  };
  return (
    <div>
      <input
        name="name"
        placeholder="이름"
        onChange={onChange}
        value={name}
        ref={nameInput}
      />
      <input
        name="nickname"
        placeholder="닉네임"
        onChange={onChange}
        value={nickname}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

전체 코드는 다음과 같다.

 

2021.07.23 - [React.js] - React(리액트): input 상태 관리하기, input 여러 개 

React(리액트): input 상태 관리하기, input 여러 개

 이 글의 코드에서 추가된 부분만 살펴보자.

 

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

const nameInput = useRef();

nameInput.current.focus();

ref={nameInput}

먼저 useRef을 import 해 온다. 그 다음 useRef를 호출해서 nameInput에 ref객체를 저장한다.

ref={nameInput}과 같이 ref를 원하는 DOM에다가 설정해준다. 우리는 첫 번째 input에 설정해 주었다.

ref 객체(nameInput) + '.' + current (nameInput.current)는 선택하려는 DOM을 가리킨다.  

그래서 우리가 원하는 작업인 foucs를 추가해서 nameInput.current.focus()를 해주면 최종적으로 초기화를 눌렀을 때, 

포커스가 첫 번째 input으로 이동하게 된다.

 

초기화를 누르면 다음과 같이 포커스가 이동한다.

추가적으로 useRef는 이렇게 DOM을 선택하는 것뿐만 아니라 렌더링과 전혀 관계없는 변수와 같은 것을 관리하게 될 때에도 사용할 수 있는데 이것에 대해서는 나중에 알아보도록 하자.