React eslint error missing in props validation 해결방법

React 개발 시 ESLint를 사용하면 코드 품질을 유지하고 일관성을 보장할 수 있습니다. 하지만, Missing in props validation이라는 오류는 흔히 발생하는 경고 중 하나입니다. 이 오류는 컴포넌트의 props에 대해 PropTypes를 사용해 타입을 명시하지 않았을 때 나타납니다. 이번 글에서는 이 문제의 원인과 간단한 해결 방법을 알아보겠습니다.

.eslintrc.cjs 파일에 추가해주면 된다!

"rules": {
  "react/prop-types": "off"
}

 

1. 오류 원인

ESLint의 react/prop-types 규칙은 React 컴포넌트에서 전달받는 props가 올바르게 정의되었는지 확인합니다. 이를 통해 props의 타입 및 유효성을 명확히 하고 코드의 안정성을 높일 수 있습니다.

하지만, 다음과 같은 상황에서 문제가 발생할 수 있습니다.

• PropTypes를 정의하지 않은 경우
• TypeScript를 사용하여 타입을 정의하고 PropTypes를 생략한 경우
• props를 사용하지 않는 간단한 컴포넌트인 경우

예를 들어, 아래와 같은 코드에서는 Missing in props validation 오류가 발생합니다:

jsx

코드 복사

const MyComponent = ({ name }) => { return <div>Hello, {name}!</div>; }; export default MyComponent;

---

2. 해결 방법

(1) PropTypes 추가

해당 오류를 해결하려면 PropTypes를 사용해 props의 타입을 명시하면 됩니다.

jsx

코드 복사

import PropTypes from 'prop-types'; const MyComponent = ({ name }) => { return <div>Hello, {name}!</div>; }; MyComponent.propTypes = { name: PropTypes.string.isRequired, }; export default MyComponent;

(2) ESLint 설정 수정

만약 TypeScript를 사용하거나 PropTypes를 사용하지 않을 경우, ESLint 설정 파일에 react/prop-types 규칙을 비활성화하여 오류를 제거할 수 있습니다.

.eslintrc.cjs 또는 .eslintrc.json 파일 수정:

javascript

코드 복사

module.exports = { rules: { "react/prop-types": "off", }, };

설정을 변경한 후 ESLint를 다시 실행하면 오류가 사라집니다.

---

3. 해결 방법 선택 기준

1. PropTypes를 사용하는 경우
   • 프로젝트가 PropTypes를 통해 타입을 관리하고 있다면, 가능한 한 모든 컴포넌트에 PropTypes를 정의하는 것이 권장됩니다.
2. TypeScript를 사용하는 경우
   • TypeScript는 PropTypes를 대체하여 타입 유효성을 제공하므로, react/prop-types 규칙을 비활성화하면 문제를 해결할 수 있습니다.
3. 간단한 프로젝트
   • 작은 규모의 프로젝트에서는 규칙을 비활성화하여 불필요한 경고를 제거하는 것도 좋은 선택입니다.

---

4. 추가 팁

• ESLint 설정을 변경한 후에는 반드시 ESLint를 재시작하거나 프로젝트를 새로고침하여 변경 사항이 적용되었는지 확인하세요.
• 팀 프로젝트에서 PropTypes 사용 여부에 대해 합의하고, ESLint 설정을 공유하여 일관성을 유지하세요.

---

결론

React에서 Missing in props validation 오류는 PropTypes 미정의로 인해 발생합니다. 간단히 PropTypes를 추가하거나 ESLint 설정 파일에서 react/prop-types 규칙을 비활성화하면 해결할 수 있습니다. 프로젝트의 요구사항에 맞는 방법을 선택하여 효율적으로 문제를 해결하세요!