React - useRef란?

1. 개요

자바스크립트에서 DOM요소를 선택하고 싶을때 getEelementById 나 querySelector를 사용하곤 한다.

리액트에서도 마찬가지로 DOM요소를 선택하고 싶을 때는 어떻게 할까?

✅ useRef를 사용하면 된다.

 

2. 사용 방법

import { useRef } from "react";

state를 사용할 때와 같이 리액트의 기능이기 때문에 import해준다.

const authorInput = useRef();


const handleSubmit = () => {
    if (state.author.length < 1) {
      authorInput.current.focus();
      return;
    }
    
return (
	<input
          ref={authorInput}
          name="author"
          value={state.author}
          onChange={handleChangeState}
     />
)

1. 원하는 DOM요소에 넣을 변수를 생성한다. → Ref로 생성

2. DOM요소에서 ref 속성을 추가한다. 

 

대부분 Ref를 사용할 때는 current 속성과 같이 사용한다.