prop-types (원하는곳에 해당 props가 정확히 입력되었는지 확인)

prop-types (원하는곳에 해당 props가 정확히 입력되었는지 확인)

prop-types는 내가 작성한 컴포넌트에 props를 전달하였는데 전달한 props가 내가 원하는 정보를 정확히 전달받고 있는지 확인해준다.

terminal에 npm i prop-types 를 입력해여 설치한다. 

설치가 완료되었는지 확인하는 방법은 

package.json 파일안에

prop-types 가 입력되어있는지 확인한다.


prop-types를 사용하기위해서는 컴포넌트를 불러오듯이

 를 작성해준다.

그리고 정확한 props가 전달되었는지 확인하고자하는 component에 propTypes를 작성해준다.

예를들어 Food라는 컴포넌트가 있다하면 해당 컴포넌트에 props가 제대로 전달되는지 확인하고자 할때

아래 사진과 같이 작성한다.



객체의 property에는 컴포넌트에 전달할 property명을 작성하고 값에는 체크할 내용을 작성한다.

string이라고 적은것은 타입을 확인하는것이고 string 이외에도 number, bool, array, object 등 많은 타입을 검사할 수 있다.

isRequired는 props로 값이 들어왔는지 안들어왔는지 확인하는것이다.

isRequired를 작성하지않고 타입만 체크할 수도 있다.

만약에 모든 props가 내가 원하던대로 들어올 경우 에러가 발생하지 않지만 잘못전달된 경우



위의 사진과 같이 Food 컴포넌트에 props로 image가 전달되었지만 정의되지 않은 props라고 에러가 뜬다면 컴포넌트에 작성한 property가 잘못되었던지 혹은 Food컴포넌트에 작성된 props가 잘못되었는지 확인한다.

그리고 두번째 에러는 rating으로 number타입의 데이터가 입력되어야하지만 propTypes를 작성했기때문에 숫자가아닌 문자로 값이 전달되었다고 에러를 알려준다.