PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사할 때 사용하며,
TS를 사용하지 못하여 JS로 개발할 때 사용하는 것이 권장된다.
PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사하여
자식 컴포넌트에서 명시해 놓은 데이터 타입과
부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문을 띄워준다.
설치: npm i prop-types
예시:
//자식 컴포넌트
import React from "react";
import PropsTypes from "prop-types";
const AppLayout = ({ children }) => {
return (
<div>
<div>공통메뉴</div>
{children}
</div>
);
};
AppLayout.propTypes = {
children: PropsTypes.node.isRequired,
};
export default AppLayout;
---
//부모 컴포넌트
import React from "react";
import AppLayout from "../components/AppLayout";
const Home = () => {
return (
<AppLayout>
<div>Hello, next</div>
</AppLayout>
);
};
export default Home;
참고 사이트:
https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95