React - PropTypes?

 

 

 

 

 

 

 

 

이번 포스팅에서는 컴포넌트의 prop을 검사해주는 아주 똘똘한 라이브러리를 적어놓으려고한다.

 

"왜 PropTypes를 사용하는건가요?"

 

그 이유는.. 우리는 사람이기때문에 코드를 작성하다가 실수 하는 경우가있다.

(아래의 foodILike는 { name, image, rating } 의 정보를 각각 담고있는 배열이다.)

function App() {
  return (
    <div>
      {foodILike.map((dish) => (
        <Food
          key={dish.id}
          name={dish.name}
          picture={dish.image}
          rating={dish.rating}
        />
      ))}
    </div>
  );
}

예를들어 이런 코드가 있을때..  실수로 rating에 숫자를 집어넣어야하는데 문자를 넣었다던지 하는 실수..

컴파일 에러는 안되서 동작은 잘 되지만, 뭔가를 나도 모르게 실수했을때, 그 실수를 잘 찾도록 도와주는 라이브러리가 바로 PropTypes 이다.

 

기본적인 사용법은 아주 "EASY" 하다.

 

npm install prop-types 라는 명령어로 설치를 해주고,

 

import PropTypes from "prop-types";

자바스크립트 파일 상단에 "import"

 

Food.propTypes = {
  name: PropTypes.string.isRequired,
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired,
};

 

적용할컴포넌트이름.propTypes = { 조건 };

이런식으로 사용하면 기본적인 사용법은 끝.

위 코드를 해석하면?

 

name : prop값이 문자열이 맞는지, 값이 입력됬는지 안됬는지 체크

picture : prop값이 문자열이 맞는지, 값이 입력됬는지 안됬는지 체크

rating : prop값이 문자열이 맞는지, 값이 입력됬는지 안됬는지 체크

 

isRequired 값이 없으면 값이 입력됬는지 안됬는지는 체크하지않는다.

 

그래서 반드시 입력되어야하는 프롭이있으면 무적권 써주는게 좋겠지?

 

만약 조건에 어긋나면 우리 엄격한 prop-types 라이브러리 형님께선 콘솔창에 빨간 글씨로 노하실것이다.

 

그리고 원인을 디테일하게 지적해주시기때문에 프롭타입 형님이 화가 난 원인을 금방 찾을수 있다!

 

+ PropTypes 종류
- array: 배열
- arrayOf: 특정 propType으로 이루어진 배열
- bool: true or false 값
- func: 함수
- number: 숫자
- object: 객체
- string: 문자열
- symbol: ES6의 Symbol
- node: 렌더링할 수 있는 모든 것(숫자, 문자열, JSX코드)
- instanceOf: 특정 클래스의 인스턴스(ex: instanceOf(MyClass))
- oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
- oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
- objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
- shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
- any: 아무 종류

 

 

 

 

 

 

자세한 사용법과 여러 기능들은 다음 문서를 확인해보자! (한글임)

https://ko.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 확인 – React

 

 

이제 천천히 리액트를 배우고있는데, 역시 아직 너무 낯설다는걸 새삼 느낀다.

JSX, props, component 등 용어도 아직 좀 낯설고, 어떻게 유용하게 사용할 수 있는지 감이 안잡힌다 ㅎ

첫날인데 너무 욕심이 많은건가? 빨리 친해지고 싶다 React..