[ eslint ERROR ] <forwardRef> Component definition is missing display nameeslintreact/display-name

 

 

0. 오류 상황 발생

• Stackticon 프로젝트를 진행하면서 발생한 문제
• Loading.tsx 페이지 내부에 존재하는 Stacks.tsx 컴포넌트를 forwardRef로 연결하는 과정에서 발생했다.

1. 추론

에러 메세지

Component definition is missing display nameeslintreact/display-name

를 읽어보니 eslint 오류일 것이라고 생각됐다.

 

 

궁금증

1. 왜 발생할까?
2. eslint오류는 왜 발생할까?
3. 어떻게 해결하는 것이 좋을까?

 

 

2. 알아보기

1. 왜 발생할까?

• forwardRef() 함수를 호출할 때 익명 함수를 넘기면
• 컴포넌트의 이름이 나오지 않는다 -> 이 때 발생하는 에러

 

2. eslint오류는 왜 발생할까?

eslint-plugin-react/display-name
을 읽어보니 display-name 속성은 eslint에서 디버깅을 용이하기 위한 속성이다.

 

3. 어떻게 해결하는 것이 좋을까?

 

1. forwardRef()함수에 기명함수(이름이 있는 함수)를 넘긴다!

const Stacks = forwardRef<HTMLDivElement, StacksProps>(function funcionName(
  { color, selecteds },
  targetRef,
) {
  return (
    <Box ref={targetRef}>
      {selecteds.map((select: string) => (
        <Stack key={select} stackName={select}></Stack>
      ))}
    </Box>
  );
});

export default Stacks;

 

2. forwardRef()의 호출 결과로 기존 컴포넌트 대체하기

function ComponentName({ color, selecteds }: StacksProps, targetRef: React.Ref<HTMLDivElement>) {
  return (
    <Box ref={targetRef}>
      {selecteds.map((select: string) => (
        <Stack key={select} stackName={select}></Stack>
      ))}
    </Box>
  );
}

export const Stacks = forwardRef(ComponentName);

 

3. displayName 속성에 컴포넌트 이름 명시해주기

const Stacks = forwardRef<HTMLDivElement, StacksProps>(({ color, selecteds }, targetRef) => {
  return (
    <Box ref={targetRef}>
      {selecteds.map((select: string) => (
        <Stack key={select} stackName={select}></Stack>
      ))}
    </Box>
  );
});
Stacks.displayName = 'Stacks';

export default Stacks;

저는 3번의 방법으로 해결했습니다!

 

요약

1. forwardRef 함수를 호출할 때 익명 함수를 넘기면, 브라우저에서 컴포넌트의 이름이 나오지 않는다
   • eslint display-name(https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md) 속성을 통한 디버깅을 시도하거나
   • TypeScript 사용 시 에러가 발생한다
2. 해결 방법
   • forwardRef()에 기명 함수를 넘기거나
   • forwardRef()의 호출 결과로 기존 컴포넌트를 대체하거나
   • displayName에 컴포넌트 이름을 명시해준다