[React] propTypes를 통한 props 검증 및 isRequired로 필수 propTypes 설정하기

컴포넌트의 필수 props를 지정할 때, props의 타입을 지정할 때는 propTypes를 사용해야함!

컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷함. 먼저 코드 상단에 import 구문을 사용하여 불러와야 함.

import React from 'react'; // 최신 리액트 버전을 사용시 React 임포트를 불필요
import PropTypes from 'prop-types';

👉 propTypes를 통한 props 검증

• 예시
  propTypes를 설정해주면 타입의 형태대로 전달해줘야 한다.

// MyComponent.jsx
import PropTypes from 'prop-types';

const MyComponent = props => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};


// name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미!
MyComponent.propTypes = {
  name: PropTypes.string
};
 
export default MyComponent;

// App.jsx
import MyComponent from './MyComponent';
 
const App = () => {
   return <MyComponent name={3}>리액트</MyComponent>;
};
 
export default App;

브라우저와 개발자 도구에서 consle 확인해보면...?
👉 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않아서 경고가 뜬다.

이렇게 수정해주면 경고는 사라질 것임!

import MyComponent from './MyComponent';
 
const App = () => {
  // return <MyComponent name={3}>리액트</MyComponent>;
  return <MyComponent name="React">리액트</MyComponent>;
};
 
export default App;

👉 2. isRequired를 사용한 필수 propTypes 설정

propTypes를 지정하지 않았을 때 경고 메시지를 띄워보자!
propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 된다.

// MyComponent.jsx
import PropTypes from 'prop-types';

const MyComponent = ({ name, favoriteNumber, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
      <br />
      제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired
};
 
export default MyComponent;

그러면 다음 사진처럼 isRequired PropTypes 경고가 뜬다.

MyComponent에게 favoriteNumber 값을 제대로 전달해보자!

// App.jsx
import MyComponent from './MyComponent';
 
const App = () => {
  // return <MyComponent name="React">리액트</MyComponent>;
  <MyComponent name="React" favoriteNumber={1}>
      리액트
    </MyComponent>
};
 
export default App;