[React] PropTypes

김정현·2023년 2월 2일
0

기타

목록 보기
24/25

prop-types란

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

profile
개발 공부 블로그

0개의 댓글