useRef Hook

useRef를 활용하는 경우는 2가지가 있다.

 

1. 원하는 돔 요소에 직접 접근할 때

2. 렌더링과 무관한 값을 저장할 때

 

돔 요소에 직접 접근하기

 

리액트로 작업하다 보면 돔 요소에 직접 접근해야 할 때가 있다.

예를 들어, 돔 요소에 포커스를 주거나 돔 요소의 크기나 스크롤 위치를 알고 싶은 경우다.

이때 ref 속성값을 이용하면 돔 요소에 직접 접근할 수 있다. 

import { useEffect, useRef } from "react";

function textInput() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button>저장</button>
    </div>
  );
}

export default textInput;

 

useRef 훅이 반환하는 ref 객체를 이용해서 돔 요소에 접근할 수 있다.

접근하고자 하는 돔 요소의 ref 속성값에 ref 객체를 입력한다. 해당 돔 요소 혹은 컴포넌트가 생성되면 ref 객체로 접근할 수 있다. ref 객체의 crrent속성을 이용하면 돔 요소에 접근할 수 있다.

 

위에서 useEffect 훅 내부에서 돔 요소에 접근하고 있다는 점에 주목하자. 렌더링 결과가 돔에 반영된 후 호출 되므로 해당 돔 요소는 이미 생성된 상태이다.

 

렌더링과 무관한 값 저장하기

useRef 훅은 돔 요소에 접근하는 것 외에도 중요한 용도가 한 가지 더 있다. 컴포넌트 내부에서 생성되는 값 중에는 렌더링과 무관한 값도 있는데 이 값을 저장할 때 useRef 훅을 사용한다. 예를 들어 setTimeout이 반환하는 값은 어딘가에 저장해 두었다가 적잘한 시점에서 clearTimeout을 호출 할 때 사용해야한다. 아래는 useRef 훅을 이용해서 이전 상탯값을 저장하는 코드다.

 

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

function Profile() {
  const [age, setAge] = useState(20);
  const prevAgeRef = useRef(20);

  useEffect(() => {
    prevAgeRef.current = age;
  }, [age]);
  const prevAge = prevAgeRef.current;
  const text = age === prevAge ? "same" : age > prevAge ? "older" : "younger";
  return (
    <div>
      <p>{`age ${age} is ${text} than age ${prevAge}`}</p>
      <button
        onClick={() => {
          const age = Math.floor(Math.random() * 50 + 1);
          setAge(age);
        }}
      >
        나이 변경
      </button>
    </div>
  );
}

export default Profile;

 

age의 이전 상탯값을 저장하기 위한 용도로 useRef 훅을 사용한다. age 값이 변경되면 그 값을 prevAgeRef에 저장한다. age의 이전 상탯값을 이용한다. age가 변경돼서 다시 렌더링할 때 prevAge는 age의 이전 상탯값을 나타낸다. 그리고 렌더링이 끝나면 prevAgeRef는 age의 최신 상태값으로 변경된다.