React 공식문서에서는 왜 querySelector()를 권장하지 않을까?

react로 개발하다보면 특정 element를 집어서 조작해야하는 경우가 있다.

예를들면 input에 focus 를 주는 행위

 

VanillaJS라면 querySelector()와 같은 메서드를 사용하겠지만, React 에서는 Ref hook을 권장하고 있다.

왜일까?

React의 동작원리를 다시 생각해보아야 한다.

Browser의 DOM을 직접 조작하는 것이 아니라 VirtualDOM을 만들어 실제 DOM과 비교하면서 화면을 재구성해나간다.

이때 element를 만들때 html태그를 바로 붙이는 것이 아니라, React.element 객체를 만들어 생성한다.

 

여기가 포인트이다.

React에서 제공해주는 Ref 를 사용할 경우에는 VirtualDOM에 확실하게 있는, 즉 신뢰할 만한 값을 return 받을 수 있는데

querySelector()의 경우에는 이 요소가 VirtualDOM 환경에서는 신뢰할 수 없다.

 

하지만 script태그를 이용해서 브라우저에서 third party를 이용할 경우 querySelector()를 이용할 상황이 생길 때가 있다

이는 React에서 관리하는 요소가 아니기 때문이다.