Props

우리가 만든 컴포넌트는 재사용성이 뛰어나다. 하나를 만들어두고 props만 다르게 두고 주면 되기 때문이다.

Btn이라는 컴포넌트를 만들고 App에서 만들어주었다 Btn()이렇게 하면 안되고 <Btn />이렇게 해주어야 한다.

또한 여기에서 속성을 넣어서 보낼 수도 있다. 함수의 인자와 매개변수 관계라고 생각하면 될 것 같다. 그리고 저 속성에 넣는다고 적용이 되지 않는다 저 속성(props)를 보내고 컴포넌트에 보내고 컴포넌트안에서 그 속성을 사용해야만 적용이 된다.

banana라는 속성과 onChange라는 속성을 보내고 Btn컴포넌트에서 banana는 버튼이름으로 onChange는 onClick의 실행함수로 넣어주었다. (실제 컴포넌트의 태그안에 안 넣어 주면 말짱도루묵!!) 

 

여기서 우리가 banana에는 버튼 이름을 적어주려고하는데 당연히 string으로 들어가야 할 것이다.

근데 우리는 실수로 number나 다른 타입을 넣어줄 수도 있다. 이를 방지하기 위해서

PropTypes를 사용해보자!!

PropTypes는 우리가 어떤 타입의 prop을 받고 있는지 체크를해준다.

banana를 text로 onChange를 onClick으로 바꾼 뒤 이렇게 해주겠다.

분명 string이 아닌데도 불구하고 값이 잘 들어갔다.

PropTypes를 사용하여 사전에 차단해보자!!

이렇게 설정을 해주면

text는 string을 요구하고 있는데 number가 들어왔다 라고 오류가 난다.

이렇게 사전에 오류를 예방하고 우리가 원하는 타입을 지정해 줄 수가 있다.

text 속성은 있던 없던 신경을 쓰지 않는다. 하지만 이렇게 뒤에 isRequired를 붙이면 무조건 값이 들어와야한다. 

만약 아무 값이 없을 때 undifined가 아닌 default값을 줄 수도 있다.

첫 번째 컴포넌트에만 onClick속성을 주었을 때 두 번째 컴포넌트는 default 함수를 받는다.

위와 같이 잘 작동하는 것을 확인할 수 있다.