[React, TS] forwardRef 사용시 발생하는 Component definition is missing display name 문제

문제상황

React를 사용하다보면 ref를 자식 컴포넌트에 넘겨서, 그 내부 HTML 엘리먼트에 접근할 수 있게 해줘야하는 경우가 생깁니다. 이때 사용하게 되는 것이 React.forwardRef입니다.

const Input = forwardRef((props, ref) => {
  return <input type="text" ref={ref} />;
});

타입스크립트를 사용하지 않는 경우 위 방법은 정상적으로 동작합니다. 하지만, 타입스크립트를 사용하게 되면 위 코드는 Component definition is missing display name 에러를 뱉습니다. (forwardRef() 함수를 호출할 때 익명 함수를 넘기게 되면 브라우저에서 React 개발자 도구를 사용할 때 컴포넌트의 이름이 나오지 않고 이 때문에 발생하는 에러라고 합니다.)

---

해결방법

React 개발자 도구에서 forwardRef() 함수를 사용해도 컴포넌트 이름이 나오게 하는 방법은 다음과 같습니다.

1. 익명 함수를 넘기지 않고 이름 있는 함수를 넘기는 방법

import React from "react";

interface InputProps {
	// ...
}

// eslint-disable-next-line prefer-arrow-callback (린트 에러 무시를 위해 추가해야한다.)
const Input = React.forwardRef(function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
  return <input type="text" ref={ref} />;
});

export default Input;

2. forwardRef() 함수 호출의 결과를 displayName에 설정하는 방법

import React from "react";

interface InputProps {
	// ...
}

const Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {
  return <input type="text" ref={ref} />;
});

Input.displayName = "Input";

export default Input;

3. forwardRef() 함수의 호출 결과로 기존 컴포넌트를 대체하는 방법

import React from "react";

interface InputProps {
	// ...
}

function Input(props: InputProps, ref: React.Ref<HTMLInputElement>) {
  return <input type="text" ref={ref} />;
}

Input = forwardRef(Input);

export default Input;

---

참고문헌

https://www.daleseo.com/react-forward-ref/

https://stackoverflow.com/questions/67992894/component-definition-is-missing-display-name-for-forwardref