ref로 HTML Element 접근/제어

React로 웹 애플리케이션을 개발하다 보면 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요.

prop인 ref을 이용할 수 있습니다.

 

current 속성을 갖는 특정 형태의 객체만을 할당할 수 있는데

클래스 기반 컴포넌트에서는 React.createRef() 함수를,

함수형 기반 컴포넌트에서는 useRef() 훅 함수를 사용하여 이 객체를 생성할 수 있습니다.

 

아래 코드는 useRef를 이용한 예입니다.

import React, { useRef } from "react";

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

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

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

공식 홈페이지에서 말하기를

Ref를 사용해야 할 때는 

1. 포커스, 텍스트 선택영여그 혹은 미디어 재생 관리 할 때

2. 애니메이션을 직접적으로 실행시킬 때

3. 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

라고 합니다.

 

또한 남용하지 말라고 설명되어 있는데

첫째, React에서는 props를 통해서만 구성 요소 간에 통신해야하는데 

ref 속성을 사용하여 다른 구성 요소와 통신 할 수 있다고 합니다.. 이렇게 하면 원하는 대상에 대한

정보를 얻을 수 있지만 참조가 데이터 동기화를 보장하지 않기 때문에 애플리케이션에서

데이터 기반 작업을 잃게 된다고 합니다.

 

두번째, 상태 및 구성 요소 계층 구조로 애플리케이션 UI의 모든 부분을 제어하도록 지정합니다.

리액트 참조를 상용하여 데이터를 전달하는 것은 react 사고 패턴에 위배됩니다.

 

세번째, 리액트 ref를 사용하면 데이터 변경보다는 이벤트와 관련하여 애플리케이션 UI를 업데이트하는

것이 좋다고 합니다. 

 

 

 

참고 https://blog.logrocket.com/why-you-should-use-refs-sparingly-in-production/

Why you should use refs sparingly in production - LogRocket Blog

https://ko.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React