Proptypes를 이용한 타입 체크

JavaScript를 사용하는데 TypeScript 처럼 타입 검사를 하고 싶을 때는 Proptypes를 쓸 수 있다.

예시를 들어보자.

"use client"
import React from "react"
import PropTypes from 'prop-types';

export default function Home(props){ // 서버단에서 불러온 데이터를 props내려주기 했을때
const {data} = props; // 구조분해할당으로 원하는거 가져오고

  const datamap = data.map((a,i) => (
       <div key={i}>
       	<div>{a.title}</div>
       </div>
  ))
  return(
     <>
      {datamap}
    </>
    
  )
}

Home.propTypes = {
	data: PropTypes.array.isRequired,
};

자 여기서 주목해야할 것은 맨 아랫부분인데 저 코드의 뜻은 
Home 컴포넌트가 data라는 이름을 필수적으로 배열 타입으로 받아야 한다는 뜻이고 isRequired는 파라미터가 반드시 전달되어야 한다는 뜻이다!
만약 3가지 중 하나라도 지켜지지 않으면 콘솔에 에러가 뜨게된다. (개발 환경에서만 보여서 배포전에 콘솔을 확인해보쟈!)

Home.propTypes = {
	data: PropTypes.string.isRequired,
};

배열 말고 다른 걸 검사하고 싶을 때는 위 코드처럼 array 부분을 string으로 변경할 수 있다! 

이렇게 하면 조금 귀찮을 수 있어도 type검사를 진행 할 수 있어 배포시 에러를 줄일 수 있다.