[React] #2.4 Protection with PropTypes (#코딩공부)

https://youtu.be/JZhSIj8hgLE

---

<복습>

https://wook-2124.tistory.com/130

[React] #2.3 .map Recap (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

---

1. prop-types

npm i(install) prop-types로 prop-types를 설치해줬다. prop-types는 기존의 props와 관련된 내용에 대해서 정상 실행여부와 관련없이 오류를 검증해준다. 말 그대로 props안에 있는 prop들의 type을 검증해주는 역할이다.

 

prop-types을 실행하기 전에, rendering(표현)하고 있는 App.js에 import하고 favFood에 rating을 추가했다.

 

다음으로 children Food component(App component 안에 있는 Food component)에 rating props를 추가하고, parent Food component에 argument(인자)로 rating을 추가했다.

---

2. Food.propTypes

Food.propTypes로 Food component안에 있는 props의 Types을 살펴봤다. 여기서 import한 이름은 'P'ropTypes이지만, 기본 내장되어있는 method는 'p'ropTypes이다. name, picture, rating 3개의 props를 string으로 확인하려 하고, isRequired로 값이 확인되어야 한다는 뜻이다.

 

하지만 rating의 type은 number이기 때문에 string이 아닌 number로 적어야 한다는 오류가 나왔다.

 

rating의 type을 number로 바꾸자 오류가 사라졌다.

 

실험을 위해서 prop-types에서만 picture props의 이름을 image로 바꿔봤다.

 

그러자 The prop `image`는 `undefined`됐다고 warning으로 알려주는데, 프로그램 자체를 돌리는데에는 문제가 없다. 이처럼 prop-types는 그저 props에서 어디가 잘못됐는지 살펴보기만 하는 역할을 한다. prop-tpyes를 이용해서 Array, Boolean 등등 많은 것들을 체크해볼 수 있다.

 

isRequired처럼 요구된다고 적으면 요구되는 값이 무조건 있어야한다. 하지만 rating같이 isRequired를 빼면 rating 값이 없는 것도 warning이 뜨지 않고 괜찮다. 즉 하나의 rating을 적지 않아도 살펴보는 것이다.

 

추가로 아래 React 사이트에서 PropTypes의 많은 예시들을 볼 수 있다.

 

ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React