[react] #6 useRef

useRef() 란?

useRef는 DOM 요소에 접근을 위해 사용이 되는 리액트 hook 이다.
reference의 약자로 '참조'라는 의미.

 

 

 

JavaScript 에서 특정 DOM 을 선택 시,  getElementById, querySelector 같은 DOM Selector 함수를 사용

 

 

리액트에서 DOM 을 직접 선택 시, ' ref '  사용.

 *함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수 사용.

 *클래스형 컴포넌트에서는 콜백 함수를 사용하거나 React.createRef 라는 함수를 사용

 

 

특정 돔 선택 이유 - 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지,  Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에  등등

 

 

 

사용
1. 리액트에서 useState 훅을 사용하여, 변수를 관리 해주는데,
state가 변할 때마다 다시 랜더링이 되면서 컴포넌트 내부 변수들이 초기화.
원하지 않는 랜더링 때문에 곤란할 경우, state 대신 Ref 에 값을 저장. - 값 변경되도, 재랜더링x, 불필요한 랜더링 막을 수 있음.
또한, 컴포넌트가 랜더링 되어도 Ref 저장 값은 그대로 유지.
랜더링을 발생시키지 말아야 하는 값을 다룰 때 편리함!

 

2. DOM요소 접근
input 요소를 클릭하지 않고, 포커스 주고 싶을 때 많이 이용.
ex) 로그인 화면 - id 칸 자동 포커스
바닐라 js 의 document.querySelector() 과 비슷하다고 생각하면 됨.