[React / EsLint 경고] todos is missing in props validation

항상 같은 방법으로 컴포넌트에 props를 전달 했었는데 EsLint에서 경고가 생기지 않았어서 프롭스로 전달 하는 속성에 타입을 지정해주지 않아도 된다고 생각했다. 경고가 생기지 않았던 이유는 eslint.config.js파일에서 "react/prop-types": "off" 로 해놨었기 때문에 경고가 발생하지 않았던 것이다.

⚠️ props로 전달한 데이터에 대한 경고 원인

먼저 이미지의 코드를 살펴보면 VSCode 확장 프로그램인 Error Lens가 설치되어 있는 상태이다. Error Lens는 실시간으로 오류 또는 경고를 알려주는 확장 프로그램이다.

경고 내용

• todos is missing in props validation
• todos.filter is missing in props validation
• todos.map is missing in props validation

코드에 경고가 생겼는데 이에 대한 원인은 프롭스로 전달한 속성에 대한 타입을 지정해주지 않아서이다. 프롭스의 타입을 지정해주려면 PropTypes을 설치 해야 하는데 설치방법은 아래 내용 참고 !

---

📌 prop-types 설치

1. 설치 ➡️ npm install prop-types

2. 해당 파일에 import 하기 ➡️ import PropTypes from "prop-types";
3. 프롭스로 받은 속성들에 대한 타입 지정해주기 (이 코드에서는 타입을 array로 지정해준 것을 확인할 수 있다.)

 TodoItem.propTypes = {
  todos: PropTypes.array.isRequired,
   setTodos: PropTypes.func.isRequired,
};
//isRequired는 해당 타입이 필수로 들어가야 된다는 옵션이다 필요한 props에 붙여주면 된다

📌자주 사용하는 prop-types 종류

• array : 배열
• bool : True, False
• func : 함수
• number : 숫자
• object : 객체
• string : 문자열
• symbol : ES6의 심볼