[React] useRef의 몇 가지 특징들 #useState vs useRef

💡값이 변경될 때 리-렌더링

useState와 useRef의 가장 큰 차이는 값이 변경될 때 렌더링의 발생 유무이다. State는 값이 변경될 때마다 리렌더링이 되지만 Ref는 리렌더링이 되지 않는다. Ref는 리렌더링이 될 때 변경된 값을 확인할 수 있다.  따라서 컴포넌트에 엄청 자주 변경되는 값이 있을 때, 그 값에 의해 리렌더링될 필요는 없을 때 사용하면 좋다. 일반 변수와도 닮은 것 같지만 리렌더링이 될 때 컴포넌트 자체가 다시 호출되게 되고 이 때 일반 변수는 값이 다시 초기화 되지만 Ref는 컴포넌트의 전생애주기(마운트 ~ 언마운트)를 통해 유지되기 때문에 컴포넌트가 리렌더링 되어도 값을 유지한다. 

 

 

💡 DOM 요소에 접근할 때

자바스크립트에서 id나 class등으로 DOM 요소에 접근하는 것 처럼 리액트에서는 DOM에 접근하기 위해 Ref를 사용한다. 아래에서 컴포넌트가 마운트 되었을 때 `<input>` 태그에 focus를 적용하는 예시 코드를 보자. 

function App() {
  const idRef = useRef();

  useEffect(() => {
    idRef.current.focus();
  }, [])

  return (
    <div>
      아이디: <input type="text" ref={idRef} />
      비번 : <input type="password" />
    </div>
  )
}

간단하게 설명을 해보자면 `idRef` 를 선언하고 아이디를 입력하는 `<input>`의 ref로 전달하였다. useEffect로 컴포넌트 마운트시 idRef에 focus가 가도록 작성하였다.