ESLint "____ is missing in props validation" 오류 해결하기

React 프로젝트를 진행하면서 ESLint가 출력하는 
<ComponentName> is missing in props validation 
오류 메시지를 보았습니다.
이 오류는 컴포넌트에서 전달받은 props에 대한 검증이 누락되었음을 의미합니다.
이 오류의 원인과 해결 방법에 대해 정리해보았습니다.

 

오류의 원인

ESLint 의 eslint-plugin-react 플러그인은 컴포넌트에서 사용되는 props에 대해 명시적으로 타입이나 형식을 지정하도록 유도합니다. 즉, 컴포넌트가 어떤 props를 받는지 명확히 하지 않으면 다음과 같은 경고 메시지가 출력됩니다.

에러 메시지: Warning: 'id' is missing in props validation

error image

 

해결 방법

1. PropsTypes를 사용하여 props 검증 추가하기
만약 JavaScript 기반의 프로젝트라면, Prop Types 를 사용해 props의 타입을 지정할 수 있습니다.
예를 들어, 아래와 같이 title과 content를 받는 컴포넌트가 있다고 가정해봅니다.

import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = ({ title, content }) => { return (

{title}

{content}

); }; MyComponent.propTypes = { title: PropTypes.string.isRequired, content: PropTypes.string, }; export default MyComponent;

위와 같이 propTypes를 선언하면, ESLint는 해당 컴포넌트가 어떤 props를 받아야 하는지 알게 되어 경고가 사라집니다.

2. TypeScript 사용 시 ESLint 설정 변경하기

TypeScript를 사용하고 있다면, 이미 인터페이스를 통해 props의 타입을 정의하고 있기 때문에 PropTypes가 불필요할 수 있습니다. 이 경우 ESLint의 react/prop-types 규칙을 비활성화할 수 있습니다.

프로젝트의 ESLint 설정 파일(.eslintrc 또는 package.json 내의 eslintConfig)에 아래와 같이 추가하세요

//eslintrc or eslint.config
{
  "rules": {
    "react/prop-types": "off"
  }
}

이렇게 하면 TypeScript로 타입 검사를 대신하므로 ESLint에서 props 검증 경고를 발생시키지 않습니다.

3. 파일 내에서 특정 줄만 비활성화하기

경우에 따라 해당 컴포넌트에서만 일시적으로 규칙을 비활성화하고 싶다면, 파일 상단이나 해당 라인에 아래와 같이 주석을 추가할 수 있습니다.

//jsx
/* eslint-disable react/prop-types */

//jsx
// eslint-disable-next-line react/prop-types
const MyComponent = ({ title, content }) => { /* ... */ }

정리

문제의 원인: 컴포넌트에서 props검증이 없으면 ESLint 의 reat/prop types 규칙에 의해 경고가 발생합니다.

해결 방법

• PropTypes를 사용해 props의 타입을 명시적으로 정의합니다.
• TypeScript를 사용하는 경우, ESLint 설정에서 react/prop-types 규칙을 비활성화합니다.
• 필요에 따라 파일 내 특정 부분에서만 규칙을 임시 비활성화할 수 있습니다.

프로젝트 상황에 맞는 방법을 선택하여 적용하기

 

위와 같이 propTypes를 선언하면, ESLint는 해당 컴포넌트가 어떤 props를 받아야 하는지 알게 되어 경고가 사라집니다.