[React] useRef

useRef로 특정 DOM 선택하기

내용

JS를 사용할 때는 특정 DOM을 선택하는 상황에서

getElementById, querySelector와 같은 DOM Selector 함수를 사용해서 DOM을 선택했음

 

리액트를 사용할 때도 가끔 DOM을 직접 선택해야 하는 상황이 발생하는데, ref를 사용함

ex) 특정 요소의 크기를 가져오거나, 포커스 설정 하거나, 외부 라이브러리 사용할 때 등

 

함수형 컴포넌트에서 ref를 사용할 때는 useRef 라는 Hook 함수를 사용함

 

초기화 버튼을 클릭했을 때, 이름 input에 포커스가 잡히도록 useRef를 사용해서 기능을 구현해보면 다음과 같음

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

function InputSample() {
  const [inputs, setInputs] = useState({
    name: "",
    nickname: "",
  });

  const { name, nickname } = inputs;
  const nameInput = useRef();

  const onChange = (e) => {
    const { value, name } = 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="닉네임"
        value={nickname}
        onChange={onChange}
      />
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

 

useRef()를 사용해서 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해 줌

이렇게 되면 우리가 원하는 DOM을 가리키게 됨

 

초기화가 이루어졌을 때, 해당 Ref 객체의 current 값은 우리가 원하는 DOM을 가리킴

거기서 focus()라는 DOM API를 호출한 것임

useRef로 컴포넌트 안의 변수 만들기

useRef는 DOM을 선택하는 용도 외에도, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리할 수 있음

useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않음

 

리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서,

다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면

useRef로 관리하고 있는 변수는 설정 후 바로 조회할 수 있음

 

이러한 점을 이요해서 setTimeout, setInterval을 통해 만들어진 id

외부 라이브러리를 사용하여 생성된 인스턴스

스크롤의 위치 등을 관리할 수 있음

-> (리렌더링 없이) 새 항목에서 사용할 고유 id를 관리하는 용도

 

 

참고

- 벨로퍼트님의 모던 리액트