[React JS] 리액트 Props 검증, PropTypes에 대하여

 콘솔 에러

리액트는 엘리먼트가 많을 경우 Key를 줘야 함

 

key 부여

-----------------------------------------------------------------------------------------------------------------------------------

 

예시) 영화 제목에 숫자만 출력되는 것을 원하지 않을 경우

        포스터에 출력되는 값이 숫자나 true/false 같은 값이 되는 것을 원하지 않을 경우

 

<PropTypes 설치>

cmd창에서 yarn add prop-type 명령어 실행

 

propTypes에 대하여

부모 컴포넌트에게 받는 정보의 종류가 무엇인지 체크할 수 있음

 

<Example>

title을 숫자로 지정한다면 에러 발생

 

콘솔 에러

이를 통해 우리가 얻는 정보가 number가 아님을 알 수 있음

 

만약 부모 컴포넌트가 string을 보내면, PropTypes로 string이라는 것을 체크할 수 있음

 

'isRequired'라고 작성하면 movie컴포넌트는 title이라는 prop을 제공하는 것이 필수로 설정됨

 

isRequired

 

정리

부모 컴포넌트에서 얻는 정보의 종류가 무엇인지,

있는지 없는지 알 수 있음

 

 

 

관련 강좌. 출처

https://www.inflearn.com/course/reactjs-web/

리액트 처음이시라구요? React JS로 웹 서비스 만들기! - 인프런