1. 특정 DOM 선택하기
JavaScript에서는, 특정 DOM을 선택해야 할 때, getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택합니다. 하지만 리액트 프로젝트에선 이를 사용하지 않고 useRef를 사용해서 DOM을 선택합니다.
DOM을 직접 선택해야 하는 상황 예시
- 특정 엘리먼트의 크기를 가져오는 상황
- 스크롤바 위치를 가져오거나 설정해야 하는 상황
- 포커스를 설정해줘야 하는 상황
- Video.js, D3.js, chart.js 등의 외부 라이브러리등을 사용하는 상황
2. 컴포넌트 안의 변수 만들기
useRef Hook은 DOM을 선택하는 용도 외에도, 다른 용도가 한가지 더 있는데요. 바로, 컴포넌트 안에서 조회 및 수정할 수 있는 변수를 관리하는 것 입니다.
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않습니다. 리액트 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회할 수 있습니다.
useRef로 변수 만들어야 하는 상황 예시
setTimeout,setInterval을 통해서 만들어진id- 외부 라이브러리를 사용하여 생성된 인스턴스
- scroll 위치
만약 useRef를 사용하지 않은 경우, 브라우저 메모리에는 미처 정리하지 못한 intervalId 들이 1초에 하나씩 쌓이게 됩니다.
