본문 바로가기

FrontEnd/React

[React] movie_app//3. propType

저번 시간까지의 코드를 컴파일하면


다음과 같은 오류가 발생한다.


해석 하자면 어레이의 각각의 자식들은 유니크한 속성 "key"값을 가지고 있어야 한다는 것이다.


이것은 데이터의 primarykey랑 비슷한거 같은데


보통 id나 다음과 같이 값을 준다.


return <Movie title={movie.title} poster={movie.poster} key={index} />



map함수의 파라미터 중 index를 이용하여 자연스레 key를 하나씩 주는 방법이다.


이와 같은 다양한 props의 오류를 확인하기 위해서 prop-types를 이용해 볼 수 있다.


다음과 같이 사용하는데


예를 들자면


정적인 propTypes객체를 이용하는데

 title 속성의 PropTypes.string.isRequired는

속성타입이 . 문자열이고 . 그것은 필수적인 값이다.


라는 의미이다.


만약 문자열이 아니거나 title값이 없다면 console에서 오류를 알려준다!

'FrontEnd > React' 카테고리의 다른 글

[React] movie_app//5-1.State  (0) 2018.10.01
[React] movie_app//5.LifeCycle in React  (0) 2018.10.01
[React] movie_app//3. Lists with map  (0) 2018.09.21
[React]Movie_app//2. props  (0) 2018.09.21
[React]Movie_app//1. 기본 문법  (0) 2018.09.21