useRef로 특정 DOM 접근하기

React.js를 공부하면서 useRef에 대해 간략히 정리하는 글이다. 

기능 설명을 위해 위와 같이 간단한 화면에서 첫번째 input태그와 두번째 textarea 태그의 텍스트가 특정 길이 미만일때 저장버튼을 클릭시 focus가 되고 return 시키려한다. 

 

//jQuery로 구현시
const authorInput = $('input[name=author]');

if(authorInput.value.length < 1){ // 길이가 1보다 작을 경우 focus
    authorInput.focus();
    return;
}

물론 자바스크립트에서 제공하는 document.getElement나 위와 같이  jQuery를 사용하여 특정 element에 접근하여 길이 체크 및 focus가 되도록 할수 있지만 react에서는 useRef 라는 React Hook을 사용하면 특정 DOM에 접근이 가능하다.

 

1. Import

import {useRef} from "react";

우선 react에서 지원하는 useRef 를 사용하기 위해 import 를 해야한다.

 

2. 변수 선언 

const authorInput = useRef();

useRef를 사용하기 위해 위와 같이 변수 선언을 한 후

<div>
    <input 
     ref={authorInput}
     name="author" 
     value={state.author}
     onChange={handleChangeState}/>
</div>

html 에서는 접근할 element의 ref 에 해당 변수를 넣어준다.

 

3. DOM 접근

const handleSubmit = () => {
     if(state.author.length < 1){
         authorInput.current.focus();
         return;
     }
     
     alert("저장성공");
    }

이후 DOM에 접근하기 위해서는 위에서 선언한 변수명.current 로 접근을 하면 되는데 위 예시는 React의 state를 사용하여 길이를 체크하고 있지만 authorInput.current.value.length로도 길이를 체크할 수 있다.