[React.js] Hooks - useRef .06

계속해서 Hook들을 소개하겠습니다. 이번 글의 주인공은 useRef입니다.

한정적인 용도라 많이 쓰이진 않지만 알아두시면 좋을 Hook 입니다.

---

🤔useRef?

공식홈페이지에서는 useRef를 이렇게 소개하고 있습니다.

useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다.
반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다.

 

useRef의 선언은 아래와 같이 할 수 있습니다.

const refContainer = useRef(initialValue);

이녀석을 어디에, 어떻게 사용할까요? 크게 두 가지의 용도로 나눌 수 있습니다.

 

1️⃣ DOM을 접근하는 용도.

2️⃣ 변수로 관리하는 용도.

 

먼저 DOM을 접근하는 용도에 대해 이야기 하고자합니다.

📲 DOM에 접근하는 경우

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

위 코드는 공식홈페이지에서 그대로 가지고 왔습니다.

inputEl 라는 변수를 들여다보면 객체안에 current라는 항목(key)이 담겨있습니다. useRef는 current라는 항목안에 값(value)를 담습니다. 이어서 input ref={inputEl} 을 통해 해당 <input />을 inputEl.current에 담았습니다.

 

onButtonClick이라는 함수를 선언해, 이벤트를 만듭니다.

버튼이 눌러지면, inputEl.current에 담긴 <input />에 focus가 가게됩니다.

 

🎁 변수로 관리하는 용도

쉽게 말해, Current에 가변의 값을 담아 사용할수 있습니다. let을 사용하듯 말이죠.

우선 useRef로 관리하는 변수의 값이 바뀐다고 하더라도 컴포넌트가 리렌더링 되지 않습니다.

이전에 useState를 사용할때는 값을 변경하면 새롭게 렌더링 되고 해당 값을 볼 수 있지만, useRef는 변경하는 값은 바로 확인할 수 있습니다. useState와의 차이점이 드러나는 부분입니다.

import React, { useRef } from "react";

function Timer() {
  const count = useRef(0);

  const onClick = () => {
    count.current = count.current + 1;
    setTimeout(() => alert(count.current), 3000);
  };

  return (
    <div>
      <button onClick={onClick}>Click ME!</button>
    </div>
  );
}

export default Timer;

위 코드를 작성하고 버튼을 3번 눌려봅시다!

alert에서 값이 몇으로 나타나나요? 모든 alert가 3으로 나타날겁니다.

useRef 대신 useState로 코드를 작성하면, alert 값이 차례대로 더해져 나타나는걸 볼 수 있습니다.

이처럼 렌더링 되더라도 useRef의 값은 유실 되지 않으며, 해당 시점의 값이 아닌 현재의 값을 보여줍니다.

 

useRef가 타 Hook에 비해 많이 사용되지 않는 이유는 용도가 제한적이기 때문일겁니다.

위 같은 경우가 필요하다면 한번씩 쓰이는 함수이니 알아두시는게 좋겠죠!

 

참조.

React - useRef (2020.2.4)