[react-native] React.forwardRef()

 React.forwardRef는 React 컴포넌트에서 부모 컴포넌트로부터 받은 ref를 자식 컴포넌트에게 전달하는 기능을 제공한다.

 

이 기능은 주로 두 가지 상황에서 유용하다.

 

첫째, DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근해야 할 때이다.

둘째, 라이브러리와 같은 재사용 가능한 컴포넌트들 사이에서 내부 요소에 ref를 전달해야 할 때 사용된다.

 

React.forwardRef를 사용하는 방법은 다음과 같다. React.forwardRef 함수는 렌더링 함수를 인자로 받는다.

 

이 함수는 props와 ref를 매개변수로 받으며, React 엘리먼트를 반환한다.

 

이렇게 함으로써, 부모 컴포넌트에서 전달한 ref가 자식 컴포넌트 내부의 특정 DOM 요소나 컴포넌트 인스턴스에 연결될 수 있다.

---

아래는 React.forwardRef를 사용하여, 입력 필드에서 엔터 키를 누르면 다음 입력 필드로 자동으로 넘어가는 예제 코드이다.

import React, { useRef, useEffect } from 'react';

const CustomInput = React.forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

function Form() {
  const firstInputRef = useRef(null);
  const secondInputRef = useRef(null);

  useEffect(() => {
    const firstInput = firstInputRef.current;
    if (firstInput) {
      firstInput.addEventListener('keydown', (event) => {
        if (event.key === 'Enter') {
          secondInputRef.current.focus();
        }
      });
    }
  }, []);

  return (
    <form>
      <CustomInput ref={firstInputRef} type="text" placeholder="First Input" />
      <CustomInput ref={secondInputRef} type="text" placeholder="Second Input" />
    </form>
  );
}

 

위 코드에서 CustomInput 컴포넌트는 React.forwardRef를 사용하여 정의된다.

 

이를 통해 CustomInput을 사용하는 부모 컴포넌트(Form 컴포넌트)는 ref를 CustomInput에 직접 전달할 수 있다.

 

Form 컴포넌트 내부에서는 useRef 훅을 사용하여 두 입력 필드에 대한 참조를 생성하고, 첫 번째 입력 필드에 keydown 이벤트 리스너를 등록한다.

 

사용자가 엔터 키를 누르면, 이 이벤트 리스너는 두 번째 입력 필드로 포커스를 이동시킨다. 이렇게 함으로써, 사용자는 엔터 키를 눌러 입력 필드 간을 쉽게 이동할 수 있다.