useRef

HSKwon·2022년 6월 10일
0

> 🤔 useRef..?

자바스크립트를 사용할 때, 특정 DOM을 선택하여 정보를 얻거나 임의로 조작해야 할 때 getElementById와 같은 DOM Selector 함수를 사용하여 DOM을 선택하였지만 리액트에서는 이를 대체할 수 있는 useRef 기능을 제공한다.

> 🤔 useRef를 사용하는 이유..?

1️⃣ 리액트는 Virtual Dom을 통해서 Real Dom을 그리기 때문에, 리액트가 제어하는 Virtual Dom의 요소들이 더 신뢰할만 하다. Dom API로 Real DOM에 있는 node를 담았지만 이게 현재 Virtual DOM을 통해 Real DOM에 존재하는 node인지 아닌지 확신할 수 없다는 점이 큰 문제!!!
2️⃣ 또한 useRef를 사용하면 무분별한 리렌더링을 방지한다. 리액트에서 컴포넌트 자신의 state가 변경되거나 부모로부터 받는 props가 변경될때마다 컴포넌트를 다시 호출해서 리렌더링을 하게되고 결국 resource 낭비로 이어지게 된다
3️⃣ useRef에 담는 변수는 독단적인 변수 그 자체이기 때문에, 그 값이 바뀐다고 해고 리렌더링으로 이어지지는 않게 된다.

profile
공부한 내용이나 관심 있는 정보를 글로 정리하며 익숙하게 만들고자 합니다.

0개의 댓글