useRef로 특정 DOM 선택하기

특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 커서를 포커스 해줘야되는지 등 다양한 상황으로 DOM을 직접 선택해야 하는 상황이 있다. 이때, 리액트에서 함수형 컴포넌트를 사용하여 특정 DOM을 선택해야 할 때 useRef 함수를 사용한다.

import React, {useState, useRef} from 'react';
	const nameInput = useRef();
	const onClick = () => {
    	nameInput.current.focus();
    }
return(
  <>
  	<input 
  		name="name"
  		placeholder="이름"
  		ref={nameInput} 
  	/>
	<button onClick={onClick} >초기화</button>
  </>

원하는 input에 ref를 추가해주고 다른 버튼을 클릭 시 useRef를 호출하여 해당 input에 focus하도록 구현하였다.

useRef로 로컬 변수 사용하기
useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되지 않는다.
컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것이다. 렌더링이 필요없을 경우 사용한다.