19.08.30.금 TIL

• react에서 props의 타입을 정할 수 있다. Typescript하고 prop-types module이다. Typescript(prop-types보다 더 엄격하게 타입을 정할 수 있고, props 뿐만이 아니라 state, function, 변수, 등등... 에도 타입을 지정할 수 있다.)는 아직 사용을 해보지 않았고 prop-types를 사용했다. nomad-coder에서 react 2주 완성 과제를 하고 있다. 오늘 과제세서 prop-types를 사용하는 과제가 있었는데 PropTypes.shape를 사용하는 거였다. 정해진 범위의 과제를 보고 하는 거였는데, 그 곳에는 PropTypes.shape에 관한 내용이 없었다. 같은 고민을 한 사람이 자기 블로그에 올린 글을 보고 사용법을 알게 되었다.

const example = [{ num: 1, animal: 'Cat'}, { num: 2, animal: 'Dog'}]

예를 들어서 위에있는 example의 배열을 props로 넘겨 받아서 배열 안에 있는 객체의 속성의 값을 사용한다.

import PropTypes from 'prop-types';
TestComponent.propTypes={
	example:PropTypes.arrayOf(
      PropTypes.shape({
        num: PropTypes.number.isRequired,
        animal: PropTypes.string.isRequired
      })
    )
}

위에 식을 말로 풀면
"example 배열 안에 객체들이 있다.

example:PropTypes.arrayOf

객체에 타입을 정해준다.

PropTypes.shape()

num 은 숫자 타입을 가진다. animal은 문자 타입을 가진다.

{
     num: PropTypes.number.isRequired,
     animal: PropTypes.string.isRequired
}