React에서 DOM에 직접 접근보다 useRef 쓰는 이유

React에서 DOM에 직접 접근하는 것은 React way가 아니라고 한다.

그 이유가 뭔지 궁금해서 조금 찾아봤다.

 

직접적인 let 변수나, 객체를 선언해서 컴포넌트 내부 변수를 사용하는 것이 아니고 useRef를 사용하는 이유는,

직접적인 내부 변수를 선언할 경우 리렌더링 시에 변수 값이 초기화되기 때문이다.

 

반면, useRef의 경우 일반적인 자바스크립트 객체로서 메모리 heap에 저장되므로,

항상 같은 메모리 주소를 참조하여 컴포넌트가 아무리 리렌더링 되더라도

이미 저장된 값 자체는 삭제되지 않고 전역변수처럼 남아있게 된다.

 

 

 

 

 

 

참고자료

https://dev-note-97.tistory.com/314

https://dev.to/dylanju/useref-3j37?fbclid=IwAR0fl7xMjn_Hp6sImCU-EQt4gJ0ob_YY6hS3cwn4ARyClTUYD2KN0R6X-O0