createRef

class MyInput extends Component {
  inputRef = createRef();
  // ...
}

• 참조
  • createRef()
• 사용
  • 클래스 컴포넌트에서 ref 선언하기
• 대안
  • createRef를 사용하는 클래스에서 useRef를 사용하는 함수로 마이그레이션하기

참조

createRef()

ref를 클래스 컴포넌트 안에 선언하려면 createRef를 호출합니다.

import { createRef, Component } from 'react';

class MyComponent extends Component {
  intervalRef = createRef();
  inputRef = createRef();
  // ...

아래에서 더 많은 예제를 볼 수 있습니다.

매개변수

createRef는 매개변수를 받지 않습니다.

반환값

createRef`는 단일 속성을 가진 객체를 반환합니다.

• current: 처음에는 null로 설정됩니다. 이를 나중에 다른 것으로 설정할 수 있습니다. ref 객체를 JSX 노드의 ref 어트리뷰트로 React에 전달하면 React는 이를 current 프로퍼티로 설정합니다.

주의

• createRef는 항상 다른 객체를 반환합니다. 이는 { current: null }을 직접 작성하는 것과 같습니다.
• 함수 컴포넌트에서는 항상 동일한 객체를 반환하는 useRef를 대신 사용할 수 있습니다.
• const ref = useRef()는 const [ref, _] = useState(() => createRef(null))와 동일합니다.

사용

클래스 컴포넌트에서 ref 선언하기

클래스 컴포넌트내에서 참조를 선언하려면 createRef를 호출하고 그 결과를 클래스 필드에 할당합니다.

import { Component, createRef } from 'react';

class Form extends Component {
  inputRef = createRef();

  // ...
}

이제 ref={this.inputRef}를 JSX에 있는 <input>에 전달하면, React는 this.inputRef.current를 input DOM 노드가 차지하게 합니다. 예를 들어 input에 포커싱하는 버튼을 만드는 방법은 다음과 같습니다.

대안

createRef를 사용하는 클래스에서 useRef를 사용하는 함수로 마이그레이션하기

새로운 코드를 작성한다면 클래스 컴포넌트 대신 함수 컴포넌트를 사용하는 것을 추천합니다. createRef를 사용하는 기존 클래스 컴포넌트가 있는 경우, 이를 변환하는 방법은 다음과 같습니다. 다음은 원본 코드입니다.

이 컴포넌트를 클래스에서 함수로 변환하려면, createRef 호출을 useRef 호출로 바꿔줍니다.