[React] useRef란? useState와의 차이

useRef?

 

리액트 공식 문서에서는 useRef를 다음과 같이 정의한다. 

 

useRef() Hook은 DOM ref만을 위한 것이 아닙니다. 본질적으로 useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 “상자”와 같습니다. 만약 <div ref={myRef} />를 사용하여 React로 ref 객체를 전달한다면, React는 모드가 변경될 때마다 변경된 DOM 노드에 그것의 .current 프로퍼티를 설정할 것입니다. useRef는 내용이 변경될 때 그것을 알려주지는 않는다는 것을 유념하세요. .current 프로퍼티를 변형하는 것이 리렌더링을 발생시키지는 않습니다.

 

즉 useRef와 useState와의 가장 큰 차이점은 렌더링 여부로 정의할 수 있다.

 

코드로 한번 살펴보자.

 

useState

import { useRef, useState } from "react";
import "./App.css";

function App() {
  const [input, setInput] = useState("");
  
  console.log("render");
  
  return (
    <div>
      <input
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
      />
    </div>
  );
}

export default App;

위의 코드는 아래 이미지처럼 state값을 input의 value로 지정해주었기 때문에 값을 입력할 때마다 컴포넌트가 리렌더링 된다.

 

useRef

 

import { useRef, useState } from "react";
import "./App.css";

function App() {
  const inputRef = useRef(null);
  
  console.log("render");
  
  return (
      <input ref={inputRef} />
    </div>
  );
}

export default App;

그러나 useRef는 state를 변경하는 것이 아니기 때문에 input값을 입력한다고 하더라도 리렌더링이 일어나지는 않는다.

 

정리

 

즉 둘의 가장 큰 차이점은 리렌더링 여부이다. 리액트 라이브러리의 목적이 컴포넌트 렌더링의 최소화인 만큼, 굳이 렌더링이 필요하지 않은 상황에서는 상태값을 state보다는 ref로 관리하는 것이 성능면에서 훨씬 효율적일 것으로 판단된다.