ReactJS - Validating Props with PropTypes | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

앞의 포스팅에서 출력 결과는 잘 나왔지만, 콘솔 창을 보면 에러가 뜬다.

"Each child in an array or iterator shoud have~~~"

=> array에 있는 각 차일드는 반드시 고유한 key prop을 가져야 한다.

이 말은, 지난 번에 작성한 맵핑은 새로운 array를 만든다.

따라서 우리는 array 안에 많은 영화를 갖게 될 것이다.

 React를 엘리먼트가 많을 경우, key라는 것을 줘야한다.

이 key는 고유해야 한다.

따라서 우리는 각 엘리먼트에 id 값을 부여하거나...

또는 mapping을 통해 얻은 1개의 argument "movie"가 있다.

movie는 현 싸이클의 현재 엘리먼트를 의미한다.

그 외 다른 건(엘리먼트들), index라고 하자.

즉, index는 우리가 현재 제공하는 리스트의 숫자를 의미한다.

따라서 key prop으로 index를 준다.

첫번째 싸이클에서, movie는 "Matrix", index는 0이 될 것이다.

두, 세번째도 마찬가지로 진행될 것이다.

결론적으로, 인덱스는 0부터 3까지 있게 될 것이다.

자, 이제 다시 브라우저를 실행하고 콘솔을 보면, 에러 메시지가 사라졌다.

왜냐하면 key를 각각 부여했기 때문이다.

여기서 우리는 movie에 관한 정보가 숫자나 boolean형으로 나오는 것을 원치 않는다.

원하는 형태의 출력만을 받기 위해서는,

'prop-types'에서 PropTyes를 import,

static propTypes를 만든다.

(그 전에 yard add prop-types 해서 새로 인스톨)

그리고 그 안에 title, poster의 원하는 형태를 입력.

=> react property type는 string

이렇게 작성하면, 타이틀 & 포스터는 string이라는 뜻이 된다.

만약에 우리가 title이 숫자형의 출력이어야 한다고 정하면?

에러가 뜨게 된다.

"Invalid prop 'title' of type ~, expected 'number'"

따라서 우리가 얻게되는 정보가 '숫자'가 아니라는 것을 체크할 수 있다.

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

즉, 우리는 부모 컴포넌트에게서 받는 정보의 종류가 무엇인지 체크할 수 있다.

뒤에 "~.isRequired" 라고 작성하면, movie 컴포넌트는 title이라는 prop을 제공하는 것이 

필수로 설정되는 것이다.

이 상태에서, render(){} 안에 movie.title을 지워버린다면?

역시 에러가 뜨게 된다.

required 필수 조건인 prop이 없다고...

따라서 우리는 이런 방식을 통해 

부모 컴포넌트에서 얻는 정보의 종류가 무엇인지, 있는지 없는지 알 수 있다.