React - useRef() DOM 요소에 접근할 수 있는 Hook

useRef()

useRef는 React Hook API 중의 하나입니다.

DOM 요소에 접근하거나, 상태값을 저장할 때 사용하는 API입니다.

내부 current 변수에 저장하게 됩니다.

 

document.getElementById와 비슷한 역할을 하게 됩니다.

 

1. DOM 요소 가져오기

function Search() {
  const inputEl = React.useRef(null);
  
  function changeHandler() {
    console.log(inputEl);
  }
  
  return (
    <div>
     <input type="text" ref={inputEl} onChange={changeHandler}/>
      <button onClick={changeHandler}>Search</button>
    </div>
  )
}

React.useRef를 선언하고,

아래에 element 태그에 ref에 useRef()를 선언한 변수를 넣어줍니다.

 

input의 change 이벤트와 button의 이벤트에서 동일하게 input 엘리먼트를 가져와서 사용할 수 있게 됩니다.

 

2. 상태가 변경돼도 렌더링 하지 않을 변수

useRef()의 경우에는 값이 변경돼도 다시 렌더링 되지 않습니다.

useState와는 다른 특성입니다.

불필요하게 렌더링 할 필요가 없을 때 상태값 저장을 위해 사용합니다.

const count = React.useRef(0);

 function plus() {
    count.current = count.current + 1;
    console.lob(count.current);
 }

 

아래 예시 코드 첨부드립니다.

포커스 버튼을 클릭하게 되면 useRef()로 저장해 둔 엘리먼트를 이용하여

포커스가 가게 됩니다.

See the Pen Untitled by powerku (@powerku) on CodePen.