useRef 용법과 특징

const ref = useRef(value)이런식으로 useRef를 선언하면 ref의 객체를 반환해준다. 이 형태는 { current: value } 다. 그리고 이 변수는 언제든 바꿔줄 수 있다. 예를 들어, ref.current = "hello"이 값은 컴포넌트의 전 생애주기를 통해 컴포넌트가 unmount 되기 전까지는 값을 유지한다.

useRef는 언제 사용될까? 그리고 왜 사용할까?

대표적으로 2가지 상황이 있다.

1. useState와 비슷하게 하나의 저장공간으로서 활용이 된다. 하지만 차이점이 있다.

useState의 경우 값이 변할 경우, 리렌더링이 일어나고 컴포넌트 내부의 변수들이 초기화 된다. 반면에, useRef의 경우, 값이 변하더라도 렌더링이 일어나지 않고 변수들의 값이 그대로 유지가 된다. 이러면 불필요한 렌더링을 막을 수 있게 되는 것이다. 또한 다른 useState의 값이 변하더라도 useRef의 값은 그대로 유지가 된다. 결국 값이 변경될때 렌더링이 일어나지 않아야 하는 값에 useRef를 사용하게 되는 것이다.

이런 특징을 활용하여 useEffect를 사용할 때, useState를 사용하면 값이 변경되어 새로 렌더링이 일어나고 다시 useEffect가 작동하니 무한루프에 빠지는 일이 생기는 문제가 있다. 이를 방지하기 위해 useRef를 사용하면 값이 변해도 렌더링이 일어나지 않기 때문에 사용하기에 좋다.

2. DOM 요소에 접근할 때.
   대표적으로 input태그를 클릭하지 않아도 포커싱이 되도록 설정하는 것이다.
   다음 아래의 예제 코드가 있다.

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

export default function UseRef() {
  const inputRef = useRef();
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  const onClickBtn = () => {
    alert(`로그인아이디: ${inputRef.current.value}`);
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" placeholder="아이디" />
      <button onClick={onClickBtn}>로그인</button>
    </>
  );
}

이 코드는 처음 렌더링이 완료되고 input태그에 포커싱이 되며, 로그인 버튼을 누르고 나서 다시 input태그에 포커싱이 되도록 설정한 것이다.

여기서 궁금증이 있다. 일반적인 변수선언과 useRef를 사용한 변수선언과 차이가 없는것은 아닐까?

차이가 있다. 함수형 컴포넌트의 경우 새로 함수가 불릴 때(렌더링될 경우), 일반적인 변수선언의 경우 그 값이 초기화 되지만, useRef를 사용한 변수는 그대로 유지되는 차이가 있다.(컴포넌트의 전 생애주기를 통해 값을 유지하기 때문에!) 그러므로 안전하게 변수를 관리할 수 있게 된다.