useRef를 이용하는 것과 그냥 변수를 정의하는 것의 차이는 무엇인가요?

Question

useRef를 통해 특정 element를 선택할 수도 있지만 값을 넣어 사용하는 경우도 있다고 하는데 그냥 변수로 사용하는 것과 어떤차이가 있나요?

아래 두 코드의 차이점이 궁금합니다.

export default function Test () {
  const a = useRef(0)
}

export default function Test () {
  const a = 0
}

배민근 · Accepted Answer

useRef는 DOM element를 저장하는 것 뿐만 아니라 질문주신대로 number를 비롯해 어떤 값이든 저장할 수 있습니다. 이를 저장할 수 있는 배경은 사실 useRef()가 사실 순수 Javascript 객체를 생성하기 때문인데요! 질문에 있는 값이 0이 0 고대로 저장되는 것이 아니라 { current: 0, ... } 같이 객체의 형태로 값이 관리됩니다. 그러면 const a = { current: 0 } 이랑은 무슨 차이가 있느냐고 말씀하실 수 있는데 React 공식 문서의 말을 빌리자면 객체 자체를 생성하는 것의 유일한 차이점은 useRef는 매번 렌더링을 할 때 동일한 ref 객체를 제공한다는 것입니다. const a = 0 이나 const a = { current: 0 } 의 경우는 렌더링될 때마다 값을 초기화 합니다. 따라서 컴포넌트의 라이프사이클동안 관리해야하는 변수에는 적절하지 않습니다. + 마지막 TMI로 useRef에서 생성하는 객체는 heap 영역에 저장되므로 웹앱이 종료되거나 가비지 컬렉팅되기 전까지 참조할 때마다 동일한 메모리 값을 가집니다. 참고. React 공식문서 useRef 섹션 https://ko.reactjs.org/docs/hooks-reference.html#useref

+ 마지막 TMI로 useRef에서 생성하는 객체는 heap 영역에 저장되므로 웹앱이 종료되거나 가비지 컬렉팅되기 전까지 참조할 때마다 동일한 메모리 값을 가집니다.

참고. React 공식문서 useRef 섹션
https://ko.reactjs.org/docs/hooks-reference.html#useref

엄홍재 · Answer

당장의 두 코드는 차이가 없어 보입니다. 
첫번째 코드는 a.current는 0 일 것이고 두번째 코드에서 a는 0일것입니다.

그러나 위 코드에 re-rendering이 포함되는 순간 둘은 아예 달라집니다.

렌더링이 일어나도 첫번째 코드의 a.current 값은 변하지 않고 같은 값을 가지고 있습니다. 그런데 두번째 코드는 렌더링이 일어나면 a의 값이 새롭게 정의된 0이 됩니다. 상태관리에 있어서 둘의 차이가 생기는 것입니다.

관련되어서 실험(?) 한 글이 있길래 첨부해 봅니다!
https://youngble.tistory.com/178