[Simple memo] React Ref란?

React Ref는 도대체 왜 사용하는가?

• HTML에 직접 접근해서 DOM API를 이용해서 제어해야할 때 Ref를 사용한다.

React 컴포넌트에는 ref prop을 넘길 수 없다.

• react에서는 컴포넌트로 props를 넘길 때 원하는 이름을 지정할 수 있다.
• 그러나 일반적인 React 컴포넌트에서는 ref라는 이름의 props를 넘길 수 없다.

(react 공식문서 참조하기)

• React ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해 사용한다.
• 아래 예시에서 사용된 inputRef, buttonRef, audioRef는 current 속성을 통해 input, button, audio 엘리먼트에 접근할 수 있고, DOM API를 이용하여 제어할 수도 있게 된다.
• DOM API를 이용하여 제어한다는 것은 버튼을 클릭하거나, input에 포커싱을 주거나, audio를 실행 혹은 중단할 수 있다는 것을 의미한다.

Example)
<input ref={inputRef} />
<button ref={buttonRef} />
<audio ref={audioRef} />

ref 변수 객체 생성법

• 위 예시에서 보여준 ref prop에는 특정 형태의 객체만을 할당할 수 있다.
• 특정 형태의 객체란 React API를 이용해서 생성한 current 속성을 갖는 객체이다.
• 클래스 기반 컴포넌트에서는 React.createRef() 함수로 생성한다.
• 함수형 컴포넌트에서는 React.useRef() 훅 함수를 이용하여 객체를 생성한다.

예제

• ref prop은 input 엘리먼트를 제어할 때 많이 사용된다.
• React Ref는 공식문서상 꼭 필요한 경우가 아니라면 사용하는 것을 '지양'하라고 쓰여있기 때문에 많이 사용해보지는 않았다.
  https://ko.reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs
• 하지만 경험상 input 태그를 제어할 때 종종 사용했던 경험이 있다.
• 그래서 input 엘리먼트를 제어하는 예시를 보여줄 것이다.

import React, { useRef }  from "react" // 1. useRef import하기

function InputExample() {
	const inputRef = useRef(null); // 2. inputRef 객체 생성
    
    // 3. inputRef의 current 속성을 이용하여 focus 제어하는 함수 생성
    function handleFocus() { 
    	inputRef.current.focus(); 
    }
    
    return (
    	<>
        	<input ref={inputRef} /> // 4. input 엘리먼트에 inputRef 할당
            <button onClick={handleFocus}>포커싱!</button>
            
        </>
    )
}

참고
https://ko.reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs
https://www.daleseo.com/react-refs/