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

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2022년 11월 11일 오후 2:22

 • 

저장 6조회 2,545

댓글 0