[React] React Hooks : 5. useRef

1. useRef란?

Javascript에선 특정 태그를 선택하기 위해 getElementById, querySelector와 같은 DOM Selector 함수를 사용하는데,

React의 함수형 컴포넌트 내에서는 useRef를 사용한다.

 

현재 스크롤 바의 위치가 어디인지, 포커스 설정, 특정 엘리먼트 크기 가져오기 등의 기능 구현에 사용된다.

 

2. useRef 사용하기

 

2-1) 최상단에 useRef 선언하기

import { useRef } from 'react';

 

2-2) ref 선언 후 초기화

ex) ExampleElement라는 이름의 선택자 생성

const ExampleElement = useRef(null);

 

2-3) useRef로 Button 이라는 내용의 div tag 클릭 시 input으로 focus됨

const onButtonClick = () => {
	ExampleElement.current.focus();
};
return (
	<div>
		<!-- ref에 ExampleElement 포커스 전달 -->
		<input ref={ExampleElement} type="text" />
		<div onClick={onButtonClick}>
        		Button
       		</div>
	</div>
);