useRef의 작동방식이 궁금합니다

Question

useRef를 통해 dom element에 접근하기도 하고, stale closure문제를 해결하는데에도 사용하는데, 실질적으로 어떻게 작동해서 이게 가능한지 궁금합니다.

손정현 · Accepted Answer

안녕하세요!

useRef를 통해 만들어지는 것은 JS의 객체와 유사하다고 보면 됩니다. useRef를 통해 만든 값이 일반 객체와 다른점은, 매 렌더링 시 동일한 객체를 제공하는 것입니다.
- useRef<T>(initialValue: T): {current: T}
- (참고: https://github.com/facebook/react/blob/fd31724d5d41a4df71af55f710b46562874511f9/packages/react-reconciler/src/ReactInternalTypes.js#L388)
- (참고: https://ko.reactjs.org/docs/hooks-reference.html#useref)

useRef를 통해 받은 값은 useRef가 사용된 컴포넌트의 라이프사이클 동안 사용할 수 있습니다. JSX에 특정 DOM 컴포넌트에 ref={useRef를 통해 받은 값}을 추가하시게 되면, 컴파일러가 JSX를 컴파일하면서 JS로 변환을 시켜주고 해당 JS를 브라우저가 실행하면서 값을 채워넣어주는 것으로 알고있습니다. (참고: https://ko.reactjs.org/docs/jsx-in-depth.html)

stale closure의 경우는 useRef의 값이 항상 같은 객체이고 closure안에서는 이 객체를 참조하는 형식이기 때문에, 객체의 current 값이 바뀌면 closure 안에서도 바뀐 current 값을 사용할 수 있습니다.
(reference 관련 so 글 참고: https://stackoverflow.com/questions/8318357/javascript-pointer-reference-craziness-can-someone-explain-this)

저도 질문에 답변하려고 여러가지 실험들을 해보았는데요. 
Functional component로 gist를 한번 만들어보았습니다. 저도 헷갈리는 부분이 있긴하지만 확실히 일반 JS 객체 대신 왜 useRef를 사용해야하는 이유를 알게된 것 같네요. 
(https://gist.github.com/json9512/ef28abf2429c639ccbdd6b48c7c3efe5)

결론은 useRef의 동작 방식이 가능한 이유는 JS에서 객체를 접근할때 참조 형식으로 접근한다는 점과 useRef를 통해 받은 객체가 항상 동일하다는 점 때문인 것 같습니다.

제가 참고했던 아티클들 첨부할게요.
- https://dmitripavlutin.com/react-useref-guide/
- https://www.freecodecamp.org/news/react-under-the-hood/
- https://www.smashingmagazine.com/2020/11/react-useref-hook/
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_Objects#%EA%B0%9D%EC%B2%B4_%EA%B0%9C%EC%9A%94
- https://hewonjeong.github.io/deep-dive-how-do-react-hooks-really-work-ko/