[React] propTypes를 통한 props 검증

 

오늘은 propTypes를 통한 props 검증에 대해 알아보겠습니다.

 

 

 

[ propTypes를 통한 props 검증 ]

컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷합니다. 우선 propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 합니다.

 

 

import React from "react";
 
import PropTypes from 'prop-types';
 
const MyComponent = (props) => {
 
(...)

 

PropTypes를 불러왔다면 코드 하단에 다음과 같이 입력해 보세요.

 

import React from "react";
 
import PropTypes from 'prop-types';
 
const MyComponent = (props) => {
 
return (...);
 
};
 
MyComponent.propTypes = {
    name: PropTypes.string
};
 
export default MyComponent;

 

이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다. App 컴포넌트에서 name 값을 문자열이 아닌 숫자로 전달한 뒤 개발자 도구의 Console 탭을 열어보세요.

 

📌 App.js

 

import MyComponent from './MyComponent';
import './App.css';
 
 
function App() {
  return (
    <MyComponent name="1" >React</MyComponent>
  );
}
 
export default App;
 

 

만약 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면 브라우저 개발자 도구의 Console 탭에 다음과 같은 결과가 나타납니다.

 

 

값이 나타나기는 했지만, 콘솔에 경고 메시지를 출력하여 개발자에게 propsTypes가 잘못되었다는 것을 알려 줍니다. 오류 메시지를 확인했다면 name 값을 제대로 설정해 주시면 됩니다.

 

import MyComponent from './MyComponent';
import './App.css';
 
 
function App() {
  return (
    <MyComponent name= 'zenghyun' >React</MyComponent>
  );
}
 
export default App;
 

 

[ isRequired를 사용하여 필수 propTypes 설정  ]

propTypes를 지정하지 않았을 때 경고 메시지를 띄워 주는 작업을 해보겠습니다. propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 됩니다. 이번에는 favoriteNumber라는 숫자를 필수 props로 지정해 보겠습니다. 

 

 

import React from 'react';
import PropTypes from 'prop-types';
 
const MyComponent = (props) => {
  const {name, children, favoriteNumber} = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name} 입니다. <br />
      children 값은 {children} 입니다. <br />
      제가 가장 좋아하는 숫자는 {favoriteNumber} 입니다. 
    </div>
  );
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

코드를 저장하고 다시 개발자 도구의 Console을 확인해 보세요. 아직 favoriteNumber를 설정하지 않았기 때문에 다음과 같은 경고가 나타날것 입니다. 

 

 

 

 

경고를 확인했다면 MyComponent에게 favoriteNumber 값을 제대로 전달해 보세요. 

 

import MyComponent from './MyComponent';
import './App.css';
 
 
function App() {
  return (
    <MyComponent name="Zenghyun" favoriteNumber={3}>React</MyComponent>
  );
}
 
export default App;
 

 

[ 더 많은 PropTypes 종류 ]

PropTypes에서는 여러 가지 종류를 설정할 수 있습니다. 어떤 것이 있는지 짚고 넘어가 보겠습니다.

 

• array: 배열
• arrayOf (다른 PropType): 특정 PropType으로 이루어진 배열을 의미합니다. 예를 들어 arrayOf (PropTypes.number)는 숫자로 이루어진 배열입니다.
• bool: true 혹은 false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX 코드, children도 node PropType입니다.)
• instanceOf(클래스): 특정 클래스의 인스턴스(예: 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://github.com/facebook/prop-types에서 확인할 수 있습니다.