React - (5) prop-types를 이용한 타입검사

프로젝트가 커짐에 따라 타입체킹을 통해 버그를 잡는 것은 중요해질 것이다.

내가 받은 props가 number이어야 하는데 string일 수도, 반대의 경우도 있을 수 있고 또 아예 전달을 받지 못하는 경우도 있을 수 있다.

이런 것을 방지하기 위해 부모 컴포넌트에서 props를 받는 경우 내가 원하는 props를 받았는지를 검사할 필요가 있다.

 

검사를 위해 prop-types를 사용한다(예전에는 리액트에 포함된 패키지였는데 이제는 별도의 라이브러리로 존재하기에 사용하려면 설치해주어야 한다)

먼저 설치는 다음과 같이 한다.

npm i prop-types

 

사용방법은 다음과 같다.

import PropTypes from "prop-types"

// 반드시 propTypes를 추가하여야 한다. 
// 다른 이름을 사용시 리액트가 체크해주지 않는다.
Component.propTypes = {
	item1: PropTypes.number.isRequired,
	item2: PropTypes.string
}

 

Component에 propTypes 속성을 추가하여 사용한다.

이때 주석에도 나와있듯이 반드시 이름을 propTypes라고 해야 리액트가 체크해줄 것이다.

 

사용하는 방법은 간단한데, 타입체크하고 싶은 props의 속성에 PropTypes를 알맞게 할당하여 사용한다.

PropTypes.number 는 속성에 number 타입을 전달받았는지 확인할 것이고,

PropTypes.string 은 속성에 string 타입을 전달 받았는지 확인할 것이다.

 

PropTypes.number.isRequired 는 타입뿐 아니라 전달 받았는지도 확인한다.

 

만약 prop-types 를 사용해서 타입체크를 했는데 버그를 발견할 경우

콘솔창에서 바로 버그에 관한 구체적인 내용을 확인할 수 있으니 디버깅하기가 더 편해질 것이다.

 

 

 

prop-types에 대한 추가적인 정보는 아래의 공식문서를 참고하자.

https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html

Typechecking With PropTypes – React