prop-types
라이브러리를 활용한 props관리
가독성 까지 높여보는 시간
defaultProps로 기본적인 에러를 잡긴 했지만, 항상 props를 넘겨줄 때마다 child 컴포넌트가 가지는 props의 타입을 확인하려면 변수를 하나하나 살펴봐야 하는 점이 마음에 안들어요. defaultProps의 데이터가 복잡하면 그만큼 컴포넌트 한켠을 차지하게 되기 때문입니다. 단순한 더미데이터 | 에러방지 목적인데 말이죠. 이런 불편한 점까지 해결을 해 보도록 하겠습니다. prop-types 라이브러리로 완벽한 해결은 쉽지 않겠지만 그래도 가독성 측면에서 훨씬 더 좋은 이점을 얻을 수 있습니다. 완벽한 해결이 되지 않는 이유 중 하나는 JS의 타입 체킹이 느슨하기 때문에 IDE가 어떤 props를 가져야 하는지 하이라이팅을 띄워주기가 쉽지 않기 때문입니다.
개발을 행복하게 합시다.
정말 개발을 행복하게 타입 에러 없이 하고 싶다면 `타입스크립트` 를 사용하는 것을 추천드립니다만, (강력하게, 사용중) 이미 JS로 리액트 개발을 진행하고 있다면 JS to TS전환은 쉬운 일이 아닙니다. 그럴 때 리액트에 붙일 수 있는 강력한 타입 접착제가 있는데, 바로 Prop-types입니다. facebook에서 밀어주고 있는 아주 괜찮은 친구에요. 기존에 defaultProps예제를 prop-types로 전환해 보도록 하겠습니다. 우선 prop-types를 설치해 주어야겠죠?
yarn add prop-type or npm i prop-types
설치를 완료하셨으면 이제 코드를 작성해 보도록 하겠습니다.
defaultProps 부분은 지워주도록 하겠습니다. 그리고 App.js에서 props넘겨주는 부분도 일단 지워주세요. 그다음, child컴포넌트를 다음과 같이 작성해 주세요.
Prop-types라이브러리를 처음 사용하는 사용자도 testArray에 어떤 값이 들어갈 지 알수 있습니다. 저 배열의 원소는 string 타입이 되겠군요.
너무 간단한 예제이기도 하고 사실 한개의 배열 props를 받는 경우에는 prop-types를 사용할 이유가 없지만, 개발 막바지에 타입 체킹하러 리액트의 모든 파일을 돌아다닐 바에야 이렇게 처음부터 확실히 정의하고 가는 것이 더 좋지 않을까 생각합니다.
Last updated
