[React] PropTypes 활용하기

1. PropTypes는 무엇인가요?

PropTypes는 타입 체크를 위해 사용되는 라이브러리입니다.

일반적으로 프로젝트의 규모가 커질수록 예기치 못한 곳에서 에러가 발생할 수 있습니다. 특히나 자바스크립트는 작성이 편하지만 파일이 많아지면 생산성이 떨어진다는 단점이 있는데요!(typescript는 이 때문에 사용한다고 합니다.) 자바스크립트로 개발을 해야하는 상황에서는 이를 피하기 위해 PropTypes를 사용하는 것을 권장합니다.

PropTypes는 부모로부터 전달받은 prop의 데이터 타입을 체크합니다. 자식 컴포넌트에서 지정한 타입과 부모로부터 전달받은 타입이 일치하지 않으면 콘솔에 경고문을 띄웁니다.

2. 예제 컴포넌트

다음의 예시로 PropTypes를 어떻게 사용하는지 보여드리겠습니다. 아래의 코드는 prop으로 id, coverImg, title, summary, genres를 받아서 div 엘리먼트를 렌더링해주는 컴포넌트입니다.

import propTypes from "prop-types";
import { Link } from "react-router-dom";

function Movie({ id, coverImg, title, summary, genres }) {
  return (
    <div>
      <img src={coverImg} alt={title} />
      <h2>
        <Link to={`/movie/${id}`}>{title}</Link>
      </h2>
      <p>{summary}</p>
      <ul>
        {genres.map((g) => (
          <li key={g}>{g}</li>
        ))}
      </ul>
    </div>
  );
}

타입체크 부재로 인한 문제점

만약 Movie 컴포넌트를 사용하는 유저가 다음과 같은 실수를 하면 어떻게 될까요?

1. title prop을 누락시킨다면?
2. id prop에 숫자가 아닌 문자열을 넘겨준다면?

다음 예시와 같은 실수를 한다면 Movie 컴포넌트는 전혀 다른 방식으로 렌더링 될 수 있습니다.

이렇게 React에서 흔히 발생하는 버그는 PropTypes 라이브러리를 이용해 prop에 대한 타입체크로 해결할 수 있습니다.

prop 타입 정의

prop-types 패키지에서 PropTypes 객체를 임포트해야 합니다.

import propTypes from "prop-types";

위에서 작성한 Movie 컴포넌트는 타입 정의는 다음과 같이 할 수 있습니다.

Movie.propTypes = {
  id: propTypes.number.isRequired,
  coverImg: propTypes.string.isRequired,
  title: propTypes.string.isRequired,
  summary: propTypes.string.isRequired,
  genres: propTypes.arrayOf(propTypes.string).isRequired,
};

id prop은 숫자 타입, coverImg,title, summary prop은 문자열, genres string타입만 포함하는 배열로 정의하였습니다. 그리고 .isRequired를 붙여 반드시 입력되어야 하는 필수 prop으로 정의하였습니다.

이렇게 컴포넌트에 넘어올 prop에 대한 타입 정의를 해주면, React는 타입 정의 위반 시 경고 메세지를 콘솔에 출력해줍니다.

3. PropTypes는 어떤 종류가 있나요?

리스트의 요소

A.propTypes{
    sports: PropTypes.element,
}	

배열에 포함된 값 중 하나를 만족

A.propTypes{
    sports: PropTypes.oneOf(["football", "soccer"]),
}	

클래스로 생성된 객체

new Sports()--> 참, new Cook()--> 거짓

A.propTypes{
    sports: PropTypes.instanceOf(Sports),
}	

배열에 포함된 타입 중에서 하나를 만족

A.propTypes{
    title: PropTypes.oneOfType([PropTypes.number, PropTypes.id]),
}	

특정 타입만 포함하는 배열

[1, 5, 7] -> 거짓(number), ["Crime", "Drama"]-> 참(string)

A.propTypes{
  genres: propTypes.arrayOf(propTypes.string)
}	

객체의 속성값 타입을 정의

{color: 'black', weight: 100} --> 참

A.propTypes{
  ball: PropTypes.shape({
      color: PropTypes.string,
      weight: PropTypes.number
    })
}	

속성값 타입이 모두 같은 경우

{ball1: 200, ball2: 100} --> 참

A.propTypes{
    balls: PropTypes.objectOf(PropTypes.number)

}	

참고한 사이트 : DaleSeo