Ref란?

1. Ref란?

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.

1-1) Ref를 사용해야 할 때

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션을 직접적으로 실행시킬 때
• 스크롤바 위치를 가져와야 할 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때
• React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용하여 제어해야 할 필요가 있을때 (엘리먼트 크기, 값 등등...)

1-2) ref prop

React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용합니다.

예를 들어, 다음과 같이 input 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기게 되면, 우리는 이 inputRef 객체의 current 속성을 통해서 input 엘리먼트에 접근할 수 있고, DOM API를 이용하여 제어할 수 있습니다.

<input ref={inputRef} />

1-3) useRef

ref prop에는 React API를 이용해서 생성한 current 속성을 갖는 특정 형태의 객체만을 할당할 수 있는데요. 클래스 기반 컴포넌트를 에서는 React.createRef() 함수를, 함수형 컴포넌트에서는 useRef() 훅(hook) 함수를 사용하여 이 객체를 생성할 수 있습니다.

2. ref 이용 예시

input 입력란 focus(), disabled 제어

버튼을 클릭했을 때, 비활성화(disabled)되어 있던 입력란을 활성화시키며 포커스(focus)를 이동시키는 React 컴포넌트

useRef 훅(hook)함수를 사용하여 inputRef 객체를 생성한다.
input 엘리먼트에 ref prop를 넘긴다.

이렇게 하면 inputRef 객체의 current 속성에는 input 엘리먼트의 레퍼런스가 저장된다.
따라서 button 엘리먼트의 클릭(click) 이벤트 핸들러에서는 inputRef.current로 간단하게 input 엘리먼트를 제어할 수 있다.

import React, { useRef } from "react";

function Field() {
  const inputRef = useRef(null);

  function handleFocus() {
    inputRef.current.disabled = false;
    inputRef.current.focus();
  }

  function handleReset() {
    inputRef.current.disabled = true;
    inputRef.current.value = "";
  }

  return (
    <>
      <input disabled type="text" ref={inputRef} />
      <button onClick={handleFocus}>활성화</button>
      <button onClick={handleReset}>초기화</button>
    </>
  );
}