익명 컴포넌트 처리오류

코드를 작성하던 중에
Fast refresh can't handle anonymous components. Add a name to your export.eslint(react-refresh/only-export-components)
이런 오류가 뜸
익명 컴포넌트를 처리할 수 없을 때 발생하는 오류

해결방법

.eslintrc.cjs 파일

 rules: {
    'react-refresh/only-export-components':[
      'warn',
      { allowConstantExport: true },
    ],
  },
}

를 아래 코드로 변경

  rules: {
    'react-refresh/only-export-components': "off"
  },
}

오류 해결

근데 둘의 차이는 뭘까?

두 코드 조각은 모두 ESLint 규칙을 설정하는 방법을 보여준다.

첫번째 코드

rules: {
   'react-refresh/only-export-components':[
     'warn',
     { allowConstantExport: true },
   ],
 },
}

이 코드는 'react-refresh/only-export-components' 규칙을 활성화하고, 이 규칙을 'warn' 수준으로 설정하며 'allowConstantExport'옵션을 true'설정하여 상수로 내보내는 것을 허용한다.
이것은 경고 수준에서 해당 규칙을 적용하는 것으로 해석된다.

두번째 코드

rules: {
  'react-refresh/only-export-components': "off"
},

이 코드는 'react-refresh/only-export-components' 규칙을 완전히 비활성화 합니다.
이것은 해당 규칙을 사용하지 않도록 설정하는 것으로 해석된다.

즉,
첫번째 코드는 해당 규칙을 경고수준으로 설정하고 추가 옵션을 포함하여 사용하는 것이며,
두번째 코드는 해당 규칙을 완전히 비활성화 시키는 것이다.

첫 번째 코드 (경고 수준 설정):

장점:

해당 규칙을 경고 수준으로 설정하여 코드에서 발생하는 문제를 미리 감지할 수 있습니다. 이는 품질 향상과 코드의 안정성을 증가시킬 수 있습니다.
추가적인 옵션을 설정하여 규칙을 세밀하게 조정할 수 있습니다. 이는 프로젝트의 요구사항에 따라 규칙을 최적화할 수 있게 해줍니다.