eslint - react/prop-types

eslint 사용 중 react/prop-types 규칙에 대한 이슈 처리

const MyComponent = ({ children }) => {
//                     ^^^^^^^^ 
//                    'children' is missing in props validation. eslint(react/prop-types)
  return <div>{children}</div>;
};

원인

react/prop-types 즉 리액트 컴포넌트에서 props를 사용할 때, 체크를 해줘야 한다.

TypeScript라면 타입을 정의하면 되지만, Javascript라면 컴포넌트가 커지고 여러 사람이 만지는 경우, props를 체크해야 하는 일이 생긴다.

해결

옵션을 꺼버리면 안 보이지만 해결된 것은 아니다.

prop-types 라이브러리를 설치하고, props를 정의한다.

import PropTypes from "prop-types";

const MyComponent = ({ children }) => {
  return <div>{children}</div>;
};

MyComponent.propTypes = {
  children: PropTypes.node,
};