[React.JS] useRef

개념

Javascript 문법으로 특정 Element에 접근할 때에는 getElementById, getElementByClassName 등으로 접근해서 사용합니다.
React.js 에서도 이처럼 특정 상황마다 특정 Element에 접근해서 이벤트를 처리할 수 있습니다.
(예를 들어, 회원가입 시 누락된 항목에 대해 경고 팝업을 띄우지 않고 포커스를 주어 곧바로 입력 가능하게 하는 등...)

방법

React에서 제공하는 useRef 를 사용하면 됩니다.

1. 가장 먼저 useRef를 import 해줍니다.

import { useRef } from 'react';

2. useRef 객체를 생성해줍니다.

const emailInput = useRef();

3. Element의 'ref' Attribute에 해당 객체를 넣어줍니다.

<input ref={emailInput} />

 

이제 Component에서 email.current 를 통해서 Element에 접근이 가능해집니다.
아래는 예시 코드 입니다.

const submit = () => {
	if (state.email.length < 1) {
    	emailInput.current.focus();
    }
};