useRef, 언제 사용할까?

useRef는 리액트에서 사용할 수 있는 훅의 하나로,
useState와 매우 흡사하지만 몇가지 다른 점이 있다.

먼저 사용하기 위해서는 따로 임포트를 해줘야한다.

import { useRef } from "react";

그리고 inputRef라는 이름으로 useRef를 하나 만들어보겠다.
그리고 input태그를 하나 만들어 ref라는 속성으로 아까만든 inputRef를 지정해준다.

function App(){
  const inputRef = useRef(null);
  
  return (
  	<>
    <input ref={inputRef} value="inputRef는 input태그의 DOM요소에 접근할 수 있다."></input>
    </>
  )
}

그럼 지금부터는 inputRef는 input태그의 모든 DOM요소에 접근이 가능하다.
예를 들어 input태그의 type을 바꾸고 싶다면,
inputRef.current.type 으로 값을 바꾸어 사용할 수 있다.

function App(){
  const inputRef = useRef(null);
  
  const handleClick = () => {
    inputRef.current.type = "radio";
  }
  
  return (
  	<>
    <input ref={inputRef} value="inputRef는 input태그의 DOM요소에 접근할 수 있다."></input>
	<button onClick={handleClick}>type바꾸기</button>
    </>
  )
}

이렇듯 useRef는 특정 태그의 DOM요소에 접근할 수 있다.
예를들어 input태그라면 type,value 등 여러가지 속성을 마음대로 바꿀 수 있다.
다만 state와 차이점은 값이 바뀔때 재랜더링 되지 않는다는 것이다.

useRef는 아래의 특정 상황을 제외하고는 사용을 지양해야한다.

• focus
• text selection
• media playback
• 애니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

위의 상황을 제외한 대부분의 경우 기본 React 문법을 벗어나 useRef를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언형 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.