Ref 란?

: 특정 DOM*(Document Object Model: HTML이나 XML 문서를 트리 형태로 구조화 해 표현한 객체)*를 직접 가리키는 포인터

React에서는 setState를 통해 데이터를 관리하지만,

DOM에 직접 접근해야 하는 상황이 생긴다.

이때, 실제 DOM에 연결할 수 있게 하는 통로가 바로 ref이다.

• useRef()로 ref 객체를 만들어 연결할 수 있다.

forwardRef 란?

: 부모가 전달한 ref를 자식 컴포넌트 내부 요소에 전달하도록 도와주는 함수

왜 굳이 forwardRef를 사용해야 할까?

React 컴포넌트에는 두 가지 요소(Element)가 있다:

• 기본 컴포넌트: React가 브라우저나 네이티브 플랫폼에 직접 매핑
• 사용자 정의 컴포넌트

⇒ ref는 기본 컴포넌트에선 직접적으로 받아 사용할 수 있지만, 이를 제외한 함수형 컴포넌트에선 불가능하다.

따라서, forwardRef로 ref를 전달하여 사용하는 것

전달 방법은?

기본 형태:

forwardRef<RefTargetType, PropsType>((props, ref) => { ... })

• 첫 번째 제너릭 - <RefTargetType> : ref가 가리킬 대상의 타입
  
• 두 번째 제너릭 - <PropsType> : 컴포넌트의 props 타입
  • 기본적으로 함수형 컴포넌트를 정의할 때 선언하는 타입

사용 예시

import { forwardRef } from "react";
import { TextInput } from "react-native";

const MyInput = forwardRef<TextInput, { placeholder?: string }>(
  ({ placeholder }, ref) => {
    return <TextInput ref={ref} placeholder={placeholder} />;
  }
);

문제점: displayName 오류

Component definition is missing display name

기본적으로 forwardRef로 감싼 익명 함수는 DevTools에서 자동으로 이름을 추론할 수 없다.

따라서 위와 같은 오류 메세지를 띄우게 된다.

해결 방안?

1. displayName 수동 지정

   MyInput.displayName = "MyInput";

   • displayName을 통해 함수 이름을 수동으로 알려주는 방식이다.

2. 내부 함수 분리해서 별도로 지정하기

   // step 1. 이름 있는 함수를 정의
   function MyModalInner(props, ref) {
     return <BottomSheetModal ref={ref} />;
   }
   
   // step 2. forwardRef로 “ref 전달 가능한 버전”을 만들어 export
   export const MyInput= forwardRef(MyModalInner);
   

   • 복잡한 스타일이기 때문에 1번의 방식을 추천