React - useState 대신 useRef를 사용해야할 때가 있다. 이 둘의 차이점과 useRef에 대해 알아보자.

React - useRef

바닐라 자바스크립트에선 특정 DOM을 선택하기 위해 querySelector, getElementById 등과 같은 함수를 사용한다. React를 사용하면서도 가끔 DOM을 직접 선택해야하는 상황이 필요한데 useRef 라는 Reack Hook을 사용한다.

사용 예시

input에서 입력 받은 값을 h2에 출력하려한다.
state만을 사용하면 매번 값을 입력할때마다 setEnteredName함수로 인해 렌더링이 일어나고 실시간으로 h2에 출력값이 변경된다.

import { useState } from "react";

export default function Player() {

  const [enteredName, setEnteredName] = useState(null);

  function handleClick(evt){
    setEnteredName(evt.target.value);
  }

  return (
    <section id="player">
      <h2>Welcome {enteredName ?? 'unknown entity'}</h2>
      <p>
        <input type="text" onChange={(evt) => handleClick(evt)}/>
        <button >Set Name</button>
      </p>
    </section>
  );
}

이런 방식이 아니라 Set Name 버튼을 클릭 시 출력되게끔 하고싶다면 useRef 훅을 사용하면 좋다.
useRef 훅을 import해서 참조 값을 생성, 해당 참조 값을 변수나 상수에 담고 이를 ref 속성을 통해 JSX요소들과 연결할 수 있으며 current 속성이 연결된 JSX의 참조 값을 가지고있다.
결과를 확인해보면 useRef로 관리하는 값은 변해도 랜더링되지 않음을 알 수 있다.

import { useState, useRef } from "react";

export default function Player() {
  const playerName = useRef();

  const [enteredName, setEnteredName] = useState(null);

  function handleClick(){
    setEnteredName(playerName.current.value);
    // playerName.current.value = '';
  }

  return (
    <section id="player">
      <h2>Welcome {enteredName ?? 'unknown entity'}</h2>
      <p>
        <input ref={playerName} type="text"/>
        <button onClick={handleClick}>Set Name</button>
      </p>
    </section>
  );
}

useState vs useRef

useState와 useRef는 React Hooks에서 각각 다른 목적으로 사용된다.

• useState
  1.상태가 업데이트되면 컴포넌트가 렌더링된다.
  2.UI에 바로 반영되어야 하는 값들이 있을 때 사용한다.
  3.시스템 내부에 보이지 않는 쪽에서만 다루는 값들이나 UI에 직접적인 영향을 끼치지 않는 값들에는 사용하지 않는다.
  

• useRef
  1.참조 값이 바뀌었다는 이유로 컴포넌트가 렌더링되지 않는다.
  2.DOM 요소에 직접적인 접근이 필요할 때 사용한다.
  3.주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는 직접적으로 관련이 없는 값들을 저장할 때 사용된다.
  4.useRef를 사용한 명령형 코드는 피하도록 조심해야한다.
  

정리

	useState	useRef
렌더링여부	상태가 변경되면 컴포넌트가 재렌더링됨	값이 변경되어도 컴포넌트는 재렌더링되지 않음
초기 목적	컴포넌트 상태 관리	DOM 참조 및 렌더링 간 값 유지
용도	UI 업데이트를 동반하는 데이터 관리	DOM 요소 접근, 재렌더링 없는 데이터 관리
반환 값	상태 값과 이를 업데이트하는 함수	current: 값 - 객체