React - ref

❶ ref란?

(1) React에서 ref는 DOM의 React 요소 또는 구성 요소에 대한 참조를 가져오는 방법입니다.
그 다음 참조를 사용하여 요소 또는 구성 요소를 직접 조작하거나 상호 작용할 수 있습니다.

❷ 참조란?

React에는 string refs와 callback refs라는 두 가지 유형의 참조가 있습니다.

1. String Refs
이 접근 방식은 더 이상 사용되지 않으며 사용하지 않는 것이 좋습니다.

2. 콜백 참조
최신 버전의 React에서 콜백 참조는 React 요소 또는 구성 요소에 대한 참조를 가져오는 데 사용됩니다.
이 메서드에서 함수는 요소 또는 구성 요소의 ref 속성으로 전달되고 이 함수는 요소 또는 구성 요소에 대한 참조를 인수로 사용하여 호출됩니다.
그 다음 이 참조를 변수 또는 상태에 저장하고 요소 또는 구성 요소를 직접 조작하거나 상호 작용하는 데 사용할 수 있습니다.

함수 구성 요소에서 callback ref를 사용하는 방법의 예시입니다.

import React, { useRef } from "react";

function MyComponent(props) {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus input</button>
    </div>
  );
}

예시에서 MyComponent 함수 구성 요소는 useRef 를 사용하여 callback ref 를 정의합니다.
useRef 는 초기 값이 null인 ref 객체를 생성합니다.
이 ref 객체는 input 요소의 ref 속성에 할당됩니다.

MyComponent 함수 컴포넌트는 사용자가 button 요소를 클릭할 때 호출되는 이벤트 핸들러 함수 handleClick도 정의합니다.
이 함수가 호출되면 inputRef ref 개체를 사용하여 input 요소에 대한 참조를 가져오고,
input 요소에 포커스를 설정하는 focus 메서드를 호출합니다.

'콜백 참조'를 사용하면 React 요소 또는 구성 요소에 대한 참조를 가져와 요소 또는 구성 요소를 직접 조작하거나 상호 작용하는 데 사용할 수 있습니다.

입력 요소에 초점을 맞추거나 구성 요소의 치수를 측정해야 하는 경우와 같은 많은 상황에서 유용할 수 있습니다.