[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