[React] PropTypes 사용하기

Typescript를 배우기 전 React를 활용할 때 PropTypes를 사용할 필요가 있다. 다른 사람들과 프로젝트를 진행하면서 PropTypes를 사용하자고 정했지만 프로젝트 기한이 다가올수록 지키기 힘들었다. 앞으로는 Typescript를 사용하지 않는다면 반드시 PropTypes를 사용하는 습관을 길러야겠다.

---

PropTypes 사용해야 하는 이유

상위 컴포넌트에서 하위 컴포넌트로 props를 전달할 때 구조가 복잡해지거나 시간이 지났을 때 기대와는 다른 props를 넘겨주는 실수를 할 수 있다. 예를 들어 어떠한 하위 컴포넌트에서 숫자를 전달받아 컴포넌트의 크기를 결정한다고 해보자. 만약 다른 사람이 해당 컴포넌트를 사용할 때 실수로 true값을 전달하면 어떻게 될까?

 

아무런 반응이 일어나지 않는다. 숫자가 아닌 true값을 전달받았지만 화면에 출력은 정상적으로 된다. 하지만 원하는 결과는 아닐 것이며 추후에 발견하고 수정해야되는 사항이다.

 

이때 PropTypes를 사용한다면 위와 같은 상황을 대비할 수 있다. 반드시 숫자형 props를 받아야한다고 설정을 한 뒤에 true값이 전달되면 오류를 출력해준다. 이를 통해 실수를 파악할 수 있고 원하는 출력값으로 수정할 수 있게 된다.

 

PropTypes를 사용하는 방법

먼저 PropTypes를 사용하기 위해 import를 해야한다. 

import PropTypes from "prop-types";

그리고 Header라는 컴포넌트가 존재한다고 해보자. Header는 margin, padding의 크기와 onClick했을 때의 이벤트처리함수, 버튼의 유무를 판별하는 props를 전달받는다.

function Header({isButton, margin, padding, onClick}) {
	return <StyledHeader 
            isButton={isButton} 
            margin={margin} 
            padding={padding} 
            onClick={onClick}
            >
            </StyledHeader>

위의 컴포넌트에서 margin과 padding은 숫자형, isButton은 boolean형, onClick는 함수를 전달받아야 한다. 따라서 아래와 같이 PropTypes를 설정할 수 있다. 아래와 같이 설정했을 때 설정값과 다른 type이 전달된다면 console창에 오류가 출력될 것이다.

StyledHeader.propTypes = {
  isButton: PropTypes.bool,
  margin: PropTypes.number,
  padding: PropTypes.number,
  onClick: PropTypes.func,
};