prop-types에 대해 알아보자

TOC

1. prop-types란?

2. 공식문서

1. prop-types란?

탄생 배경

prop-types는 App이 커지면서 props들이 늘어나고 그에 따라 props의 관리가 필요해졌다. 따라서 props를 관리하는 하나의 툴이라고 생각하면 된다.

용도

부모 컴포넌트로부터 자식 컴포넌트에게 props를 넘겨준다. 이 props가 많아질 경우
prop-types를 통해 관리하는 것으로 이 props의 자료형은 무엇인지, 잘 사용된 것인지 혹은 사용되지 않았는지를 판단해 에러 메시지를 던져준다.

eslint는 이 prop-types를 사용하지 않을경우 에러를 던져준다.

2. prop-types 공식문서

prop-types는 react에서 제공하는 공식문서가 있고 이를 잘 준수하면 된다.
공식문서

에러를 미연에 방지하고 앱 개발에 도움을 주는 고마운 존재인건 확실하다

포스팅 하기에도 좋지만 포스팅을 해야겠다고 생각한 결정적인 계기는

error  Typo in static class property declaration              react/no-typos

위와 같은 에러 때문이다.

prop-types의 선언을 이렇게 했다.

...
import PropTypes from 'prop-types';
...

그리고 propTypes를 아래와 같이 작성하였다.

...
SearchModal.PropTypes = {
  searchModalToggle: PropTypes.bool.isRequired,
  setSearchModalToggle: PropTypes.element.isRequired,
};
...

그렇다. 나는 import한 이름인 PropTypes를 그대로 아래에 똑같이 적어주었다.

그런데 오류가 발생한다.

이유는

propTypes (✅)

PropTypes (❎)

위의 것은 맞고 아래 것은 틀리다.

왜 ..? 아직까지 이유는 찾지 못하였다.

하지만 위와 같은 에러 메시지 때문에 조리돌림을 당하고 있으시다면 부디 해결방법 중 하나가 되길 바란다.