[error] ~ is missing in props validation

react 에서 하위 컴포넌트에 props 를 이용해서 데이터를 전달하려던 중,

그-컴포넌트 is missing in props validation

해당 컴포넌트 파일에서 해당 props 를 사용하는 부분에서 모두 위와 같은 에러가 떴었다

 

에러 원인

props 의 타입 검증이 필요하다는 의미이다

eslint 를 사용할 때에 나오며, 오류를 막기 위해 props의 더 정확한 타입을 요구하는 것이다

 

해결방법

yarn add prop-types

로 라이브러리를 설치 후,
props 를 받는 해당 컴포넌트 정의 파일 내에서,

import PropTypes from 'prop-types'

임포트 해 온 후, 해당 컴포넌트와 같은 최상위 레벨에서(=컴포넌트 밖에서) 아래와 같이 props 타입을 정의해주면 된다
대소문자 구분과 Props 가 아님을 주의하자

// 여기선 p가 소문자!
그-컴포넌트.propTypes = {

    // 여기선 P가 대문자!
    title: PropTypes.string,
    price: PropTypes.number
}

객체나 배열 등의 타입을 정의 시, 다음의 표를 참조하여 사용하자

Type Name	explain	example
element	리액트 element	PropTypes.element
array	배열	PropTypes.array
bool	true / false	PropTypes.bool
func	함수	PropTypes.func
number	숫자	PropTypes.number
object	객체	PropTypes.object
string	문자열	PropTypes.string
symbol	심볼 객체	PropTypes.symbol
node	렌더링 가능한 모든 것. (number, string, element)	PropTypes.node
instanceOf(ClassName)	특정 클래스의 인스턴스	PropTypes.instanceOf(ClassName)
oneOf(['value'])	배열에 포함된 값들 중 하나가 일치	PropTypes.oneOf(['강아지', '고양이'])
oneOfType(['PropTypes'])	배열에 포함된 타입 중에서 하나가 일치	PropTypes.oneOfTyle(['PropTypes.string.isRequire', 'PropTypes.number'])
arrayOf(PropTypes)	해당 PropTypes로 구성된 배열	PropTypes.arrayOf(PropTypes.number)
objectOf(PropTypes)	객체의 모든 키 값이 인자로 주어진 PropType 객체	PropTypes.objectOf(PropTypes.string)
shape({key:PropTypes})	해당 스키마를 가진 객체	PropTypes.shape({name:PropTypes.string, phone: PropTypes.number})
any	아무종류나	PropTypes.any

위의 표는 타입별로 림찌님의 블로그에서 정리하신 내용이다. 정말 깔끔하게 정리하셨다

림찌의 개발일기 : https://haerim95.tistory.com/41

아래 예시처럼 사용하자

// title 과 price 속성을 가진 shoes 객체 등은 아래와 같이 정의하자

그-컴포넌트.propTypes = {
  shoes: PropTypes.shape({
    title: PropTypes.string,
    price: PropTypes.number,
  }).isRequired,
  i: PropTypes.number,
};