[TIL] Vite-React-Eslint Prop-Types 검사 에러 없애기

프로젝트 프론트 테스트 중 Vite로 구축한 React 환경에서 컴포넌트에 props를 넘기는데

'error' is missing in props validationeslintreact/prop-types

위 에러가 계속 나서 내가 처음에 타입스크립트로 잘못 선택했나 싶었는데 에러창을 잘 살펴보니 eslint 에서 문제가 있는 것 같아 찾아봤다.

 

이유는 vite로 프로젝트 구축할 때 자동으로 생성되는 .eslintrc.cjs 파일의 extemds 부분에 있는 "plugin:react/recommended" 가 문제였다.

 

이 설정은 React 컴포넌트에서 PropTypes를 사용하여 props의 타입을 검사하도록 권장해서 PropTypes를 정의하지 않았을 때 경고 또는 오류를 발생시킨다고 한다. (출처 ChatGPT)

 

타입스크립트 미리 대비(?) 겸 그대로 둬도 타입 검사해주는 거니 좋긴 한데 지금 하는 거에서는 필요없기도 하고 코드 추가하기도 귀찮아서 끄기로 했다. 

 

방법은 간단하다. rules에 "react/prop-types": "off"를 추가하면 된다!!

 

// .eslintrc.cjs 파일

module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
  ],
  ignorePatterns: ["dist", ".eslintrc.cjs"],
  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
  settings: { react: { version: "18.2" } },
  plugins: ["react-refresh"],
  rules: {
    "react/jsx-no-target-blank": "off",
    "react-refresh/only-export-components": [
      "warn",
      { allowConstantExport: true },
    ],
    "react/prop-types": "off", // 이 줄을 추가하여 PropTypes 사용 강제 규칙을 비활성화합니다.
  },
};