[React]props 객체의 타입 검사 PropTypes

자바스크립트는 타입 검사에 유연하게 처리됩니다.

Java에서 String str = "1"; 은 문자열이지만, 자바스크립트에서 var str = 1; 은 숫자가 될 수도 있고 문자가 될 수도 있습니다.

React에서는 props 객체의 타입과 필수 여부 검사를 지원하는 PropTypes Module을 지원합니다.

---

PropType Module 설치

npm install --save prop-types

---

PropTypes Module Import

import PropTypes from 'prop-types';

---

PropTypes Module 사용 코드

const node = document.getElementById("root");

const Search = (props) => {
  return (
    <div>
      <input type="text" value={props.searchText} />
    </div>
  );
}

// props 객체의 기본 값 설정
Search.defaultProps = {
  searchText: "Search..."
};

// props 객체의 타입 검사
Search.propTypes = {
  searchText: PropTypes.string
};


render(<Search searchText="React" />, node);

See the Pen React_propTypes_EX1 by JaeSung2386 (@jaesung2386) on CodePen.

props의 searchText가 string Type이 아닐 경우 개발자 도구 콘솔에서 에러가 발생합니다.

만약, searchText가 string이 아니라도 정상적으로 동작은 합니다.

즉, 타입 검사에 대한 에러는 콘솔에서만 확인 가능합니다.

---

검사 가능한 타입들

타입	설명
array	prop가 array타입인지 검사
bool	prop가 bool타입인지 검사
func	prop가 func타입인지 검사
number	prop가 number타입인지 검사
object	prop가 object타입인지 검사
string	prop가 string타입인지 검사

검사하는 다른 타입과 prop-types의 추가적인 기능은 공식 문서에서 참고하시면 됩니다.

---

기본 값 설정

See the Pen React_propTypes by JaeSung2386 (@jaesung2386) on CodePen.

props의 searchText를 넘겨주지 않으므로 기본값으로 설정합니다.

---

데이터 타입이 잘못되었을 경우

Search.propTypes = {
  searchText: PropTypes.bool
};

string으로 값을 넘겨주고 있는데, bool로 검사할 경우에는 콘솔창에서 에러가 발생합니다.

※ 온라인 개발 도구인 CodePen에서는 에러가 나오지 않으므로 검증이 어렵습니다.

---

필수 처리

Search.propTypes = {
  searchText: PropTypes.string.isRequired
};

isRequired를 사용하여 해당 prop가 필수임을 명시합니다.

만약, 부모 컴포넌트에서 searchText를 전달하지 않을 경우 콘솔창에서 에러가 발생합니다.

---

둘 이상의 타입 검사와 타입이 아닌 값으로 검사

oneOfType

배열로 값을 전달했을 경우, 2개 이상의 타입을 검사합니다.

const node = document.getElementById("root");

const Search = (props) => {
  return (
    <div>
      <input type="text" value={props.searchText[1]} />
    </div>
  );
}

Search.propTypes = {
  searchText: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
};


render(<Search searchText={[1 , "param"]} />, node);

 

oneOf

타입 검사가 아닌 값으로 검사를 하는 방식입니다.

prop의 값이 특정 값에 포함이 되는지 검사합니다.

const node = document.getElementById("root");

const Search = (props) => {
  return (
    <div>
      <input type="text" value={props.searchText} />
    </div>
  );
}

Search.propTypes = {
  // 값으로 검사합니다.
  searchText: PropTypes.oneOf(["React", "Vue"])
};


render(<Search searchText="JS" />, node);

searchText가 "React" 또는 "Vue"에 해당이 되는지 안되는지 검사합니다.

"JS"는 "React"와 "Vue"에 해당이 안되므로 에러가 발생합니다.

---

마무리

PropTypes타입에 대해 알아보았습니다.

PropTypes를 공부하면서 "React가 아니더라도 타입 검사를 했던 적이 있었나...?"라는 생각을 했는데, 저는 다른 언어에서도 타입 검사를 하는 경우가 거의 없었습니다.

PropTypes를 사용하는 경우 실무자에게 문의한 결과와 React관련 도서 내용을 종합하면, 주로 2가지 경우입니다.

첫 번째 애플리케이션을 배포하기 전에 테스트 환경에서 타입 검사를 하는 경우

두 번째 기본 값 설정

위 두 가지 경우가 아니라도 상황에 맞게 사용하시면 될 거 같습니다.

---

참고

react 공식 문서

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

https://reactjs-kr.firebaseapp.com/docs/typechecking-with-proptypes.html

 

npm 공식 문서

https://www.npmjs.com/package/prop-types

 

예제 코드와 설명을 심플하게 작성해주셨습니다.

https://sheldhe93.tistory.com/16