useRef, forwardRef

class형 컴포넌트에서 ref를 잡아야하는 경우 React.createRef를 사용한다.

함수형 컴포넌트의 경우 React.createRef와 React.useRef 둘다 사용가능 하지만 React.createRef를 사용할 경우 리렌더링 될때마다 ref 값이 초기화되어 원하는 값을 얻지 못할 것이다. 그러니 useRef를 사용한다.

클래스 컴포넌트에 ref 사용하기

아래에 있는 CustomTextInput 컴포넌트의 인스턴스가 마운트 된 이후에 즉시 클릭되는 걸 흉내내기 위해 CustomTextInput 컴포넌트를 감싸는 걸 원한다면, ref를 사용하여 CustomTextInput 컴포넌트의 인스턴스에 접근하고 직접 focusTextInput 메서드를 호출할 수 있습니다.

class AutoFocusTextInput extends React.Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focusTextInput();
  }

  render() {
    return (
      <CustomTextInput ref={this.textInput} />
    );
  }
}

함수 컴포넌트에 ref 사용하기

함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 수 없다.

useRef

import React, { useRef } from "react";

function App() {
  const inputRef = useRef(null);
  const handleClick = () => {
    inputRef.current.focus();
  };
  return (
    <div className="App">
      <div style={{ display: "flex", justifyContent: "center" }}>
        <input ref={inputRef} />
        <button onClick={handleClick}>전송</button>
      </div>
    </div>
  );
}

전송 버튼을 누르면 인풋창에 바로 포커스가 되는 코드

forwardRef

자식 컴포넌트에 특별한 프로퍼티를 주어 DOM ref를 부모 컴포넌트로 노출하는 방식으로 부모의 ref를 자식의 DOM 노드에 넘겨줄 수 있다.

직접해보기