[React] useRef

useRef in React

DOM 엘리먼트의 주소값을 활용해야 할 경우 (아래의 경우) useRef 를 활용한다.

• focus (텍스트 입력창에 위치하기)
• text selection
• media playback (영상 재생 멈춤 등)
• 에니메이션 적용
• d3.js, greensock 등 DOM 기반 라이브러리 활용

React는 이런 예외적인 상황에서 useRef으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다.

제시된 상황 제외한 대부분의 경우 기본 리액트 문법을 벗어나 useRef를 남용하는 것은 부적절하고, React의 특징이자 장점인 선언적 프로그래밍 원칙과 배치되기 때문에, 조심해서 사용해야 한다.