ESLint - missing in props validation

props를 전달할 때 다음과 같이 빨간 줄로  ESLint 에러가 뜨는 경우가 있다.

 

하지만 정상적으로 동작하고 데이터도 잘 출력되는 상황이다.

해결방법으로 많이 검색되는 것은 .eslintrc.cjs에서 rules에 "react/prop-types": "off"를 추가하는 것이다.

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

 

off 설정을 하면 빨간 줄은 사라지지만 그러면 ESLint를 사용하는 의미가 없어지는 것 같다.

경고 메시지 우측 react/prop-types를 누르면 다음 링크로 이동할 수 있는데 이 규칙을 사용하는 이유와 규칙에 대한 예를 확인할 수 있다.

https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md

 

react/prop-types를 사용하는 이유 : 타입체킹을 통해 부적절한 데이터 타입으로 사용하는 것을 예방할 수있음

 

이 부분에 대해서는 리액트 공식 문서에서도 확인할 수 있다.

https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html

https://react.dev/reference/react/Component#static-proptypes

 

JavaScript는 같은 변수에 여러 타입의 값을 할당할 수 있기 때문에 런타임 시 타입 에러가 발생할 수 있다.

코드가 짧은 경우에는 문제가 되지 않을 수 있지만 많은 코드들을 작성하다 보면 실수가 생기기 마련이다.

 

타입 체크를 위한 Proptypes 선언 예시는 다음과 같다.

const Card = ({ title, writer, content, createdAt }) => {
  // ...
};

Card.propTypes = {
  title: PropTypes.string,
  writer: PropTypes.string,
  content: PropTypes.string,
  createdAt: PropTypes.instanceOf(Date),
};

 

다음 이미지는 title에 필요한 string 타입 대신 number 타입의 값을 받았을 때 콘솔에 에러 메시지가 출력되는 것을 보여준다.

 

타입 체크외에도 기본 값 할당, 필수 값 지정을 할 수 있다. (이 내용도 공식 문서에 잘 나와있음)

참고로 PropTypes를 사용할 때 import PropTypes from "prop-types";와 같이 import를 해줘야 한다.