TypeScript만 알고있었는데... PropTypes라는 것을 알게되었다..! props의 type을 지정한다는 목적은 비슷하지만 작동방식이 다르다고한다. 그래서 궁금증에 한번 각각의 특징을 비교해보았다.
1. PropTypes란?
PropTypes는 런타임때 타입을 체크하는 툴이다. React 15.5버전부터 prop-types 패키지를 통해 사용가능 하고 PropTypes를 통해 component의 type을 정의할 수 있다. 또한 isRequired를 통해 필수 props를 지정할 수도 있다.
만약 다른 타입의 props를 전달하거나 필수 props의 값을 넘겨주지 않았을 때, 콘솔창을 통해 경고를 얻게된다. 하지만 IDE에는 아무런 에러나 경고가 뜨지 않는다.
또한, PropTypes는 production에 대해서는 경고를 띄우지 않는다. development 환경에서만 경고를 표시한다고 한다..!
2. TypeScript란?
TypeScript는 컴파일 시간에 props의 type을 검사한다. 그리고 잘못된 type에 대해 IDE에서 즉각적으로 경고를 볼 수 있다. 그리고 npm run build를 하면 실패한다.
3. 비교
1. type checking time
PropTypes는 브라우저에서 실행되는 run time동안 type-checking을 한다. 반면에 TypeScript는 TypeScript code가 javascript로 컴파일 되는 compile time 동안 type-checking을 한다.
이것은 각각을 사용할 때 다르게 사용되어야 함을 의미한다.
Data from an API
TypeScript는 API에서 받아오는 데이터를 체크하지 못한다. 해당 데이터의 내용은 런타임에만 알 수 있기 때문에 이다... 하지만 PropTypes는 이것에 대한 경고를 보낸다.
Building a component library
컴포넌트 라이브러리를 만들 때, package manager에게 production code를 게시할 가능성이 높다. 그리고 TypeScript는 컴파일 시간에 JavaScript로 변환된다. 이것은 해당 라이브러리의 사용자가 PropTypes의 relevance를 반복하면서 props에 대한 TypeScript의 type 정의에 의존하지 못한다는 것을 의미한다. 반면 PropTypes는 일반적인 javascript 코드이기때문에 라이브러리를 사용할 때 유효성 검사를 할 수 있다.
2. Syntax and semantic highlighting
두개 모두 다 props의 정보와 자동완성기능을 제공하는 플러그인을 가지고 있다. 하지만 TypeScript의 highlighting tool이 PropTypes보다 성능이 뛰어나다. TypeScript IDE 툴에서 굉장히 많은 기능을 찾을 수 있는데 이것은 예상된 props' data type이 제공되지 않을 때 강조표시를 하고 해결방법을 제시해준다.
3. Advanced features in TypeScript
PropTypes에는 없는 타입 지정 방법이 TypeScript에 존재한다. TypeScript는 interface와 type을 결합하고 조건적인 type checking을 한다. 예를 들어, A가 참이라면 C가 무조건 제공되어야 한다 같은...
4. 어떤것을 선택할까?
TypeScript와 PropTypes 중에 선택하기 위해서는 절충이 필요하다. 따라서 이 선택은 어플리케이션이 어떤지에 따라 달라진다.
많은 사람들에게 사용되는 라이브러리를 만들 경우 런타임 체킹은 아주 중요하기때문에 PropTypes를 추천한다. 하지만 보통의 경우에는 TypeScript가 많이 사용된다.
참고 : https://blog.logrocket.com/comparing-typescript-and-proptypes-in-react-applications/
