3. PropTypes

최근에 React로 프로젝트를 진행하며 PropTypes을 사용해봤다.

사용하면서 알게되고 느낀점을 정리해보고자 한다.

 

1. 프롭타입을 사용한 이유

React로 개발하면서, 프롭스를 활용하여 데이터를 전달하였다.

그런데, 프롭스가 객체 타입인 줄 알았는데 문자열 형태로 전달되는 등

자바스크립트의 동적인 연산 등으로 예상치 못한 데이터 타입이 전달될 때 렌더링이 안되는 문제가 종종 발생했다.

 

타입스크립트를 적용하여 타입을 명시할까 고민도 해봤지만 팀내에서 타입스크립트를 활용해본 팀원이 없었기에,

팀원 모두 프로젝트 도중 배워서 적용하는 것은 어려울 것 같았다.

다른 방법을 찾다보니 타입스크립트보다 비슷한 용도로 활용할 수 있으며,

쉽게 사용가능한 PropTypes을 알게 되어 프롭타입이 중요하다고 생각한 컴포넌트에만 적용하게 되었다.

 

2. 프롭타입이란?

프롭타입은 React에서 제공하는 타입 체크 도구다.

 

구체적으로는

1) 컴포넌트에 들어오는 프롭스의 데이터 유형이나

2) 필수여부를 체크해준다.

 

3. 사용하는 방법 

3.1. 먼저 프롭타입을 설치한다.

> npm install prop-types

 

3.2. 설치 후 컴포넌트 상단에 import하여 아래처럼 사용하면 된다.

import React from 'react';
import PropTypes from 'prop-types';

컴포넌트이름.propTypes = {
  프롭스이름1: PropTypes.데이터타입.필수인경우isRequired추가
  프롭스이름2: PropTypes.데이터타입
};

/* 사용예시
const Block = ({
  block_id,
  design_type,
  layout_design,
  blockStyle
}) => {
  //... 컴포넌트 로직 ...

  return (
    //... 생략 ...
  );
};

Block.propTypes = {
  block_id: PropTypes.number.isRequired,
  design_type: PropTypes.string.isRequired,
  layout_design: PropTypes.string,
  blockStyle: PropTypes.arrayOf(PropTypes.object).isRequired,
};
*/

4. 장 / 단점

장점

1. 코드를 보다 명확하게 만들어준다.
2. 협업할 때 데이터 유형 질의에 관한 의사소통 비용을 감소시켜준다.
3. 프롭스의 데이터 유형 실수를 줄여주니, 버그 확률을 감소시킨다.

또한 예상하지 못한 데이터 타입이 컴포넌트에 전달될 때 경고 메시지를 통해 알려주기 때문에

오류를 방지할 수 있다.

단점

1. 컴포넌트마다 프롭타입을 정의하기 번거롭다.
2. 타입스크립트보다는 기능이 제한적이다.

5. 결론

프로젝트에 복잡한 데이터 구조를 가진 프롭스가 많아지는 경우

프롭스 데이터 유형에 관한 실수는 쉽게 발생할 수 있다.

 

프롭타입은 데이터유형에 관한 버그나 이슈를 미리 방지하거나

빠르게 파악할 수 있게 도와주기 때문에 한번쯤 사용해볼만하다.

 

타입스크립트는 프롭타입보다 더 강력한 타입 체크 기능을 제공하기 때문에

규모가 큰 프로젝트에서는 더 좋다고 생각한다.

빠른시일내에 타입스크립트를 배워 적용해볼 예정이다.