React - useRef

useRef란?

Javascript에서 특정 DOM에 접근하기 위해서 querySelector, getElementById 등의 메서드를 사용하였다.

React에서는 웹 애플리케이션 개발 시 DOM을 직접 조작(접근)하는 것은 지양해야한다. 하지만 개발을 하다보면 DOM을 직접 건드려야하는 상황이 발생하기도 한다.

이럴 때 사용하는 것이 바로 useRef라는 React Hook이다. useRef는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공한다.

useRef의 바람직한 사용 예시

1. 포커스, 텍스트 선택영역, 미디어의 재생을 관리할 때
2. 애니메이션을 직접적으로 실행시킬 때
3. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

React만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있지만 모든 개발 요구 사항을 충족할 수는 없으므로 위의 예시와 같이 DOM 엘리먼트의 주소값을 활용해야 하는 경우 useRef를 사용하면 된다.

사용 방법

페이지 접근 시 focus

// 1. react로부터 import 하기
import { useRef, useEffect } from "react";

const App = () => {
  // 2. 주소값을 담을 변수 선언
  const inputRef = useRef();
  
  useEffect(() => {
    inputRef.current.focus();
  }, []);
  
  return (
  	<>
      <input
        type="text"
        placeholder="텍스트를 입력하세요."
        // 3. inputRef에 input DOM 엘리먼트 주소가 담긴다.
        ref={inputRef}
      />
    </>
  );
};

useRef와 useEffect를 사용하여 페이지가 처음 렌더링된 이후 input에 자동적으로 focus되도록 구현할 수 있다.

• inputRef는 주소값을 담을 변수이고 input(접근하고자 하는 DOM 엘리먼트)의 ref 속성에 inputRef를 할당하면 input DOM 엘리먼트를 활용할 수 있다.

• useRef를 통해 저장된 주소값은 컴포넌트가 re-rendering 되더라도 초기화되지 않는다. 렌더링 여부에 상관없이 값을 유지하고 싶을때 사용하기도 한다.

• 위의 예시를 제외한 대부분의 경우 기본 React 문법을 벗어나기 때문에 useRef를 남용하는 것은 부적절하다. React의 선언형 프로그래밍 원칙과 배치되기 때문에 조심해서 사용해야 한다.

button 클릭 시 focus

<button onClick={() => inputRef.current.focus()}>focus</button>

버튼에 onClick 이벤트를 사용하여 focus 버튼 클릭 시 input에 focus 되도록 구현할 수 있다.

button 클릭 시 reset

<button onClick={() => inputRef.current.value=""}>reset</button>

마찬가지로 버튼에 onClick 이벤트를 사용하여 reset 버튼 클릭 시 input을 초기화 시킬 수 있다.