02. 컴포넌트 (3) propTypes

출처 - 리액트를 다루는 기술(김민준 지음)

---

props 사용하기

(5) propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 propTypes를 사용한다.

propTypes를 사용하려면 우선 import가 필요하다

 

// MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';

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

MyComponent.defaultProps = {
  name: '기본 이름',
};

MyComponent.propTypes = {
  name: PropTypes.string, // name 값은 문자열이어야 한다
};

export default MyComponent;

 

이후 App.js 에서 name에 숫자 값을 주면

 

// App.js
import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return <MyComponent name={3}>리액트</MyComponent>;
};

export default App;

 

에러 없이 페이지가 정상 출력되나, 브라우저 콘솔 창에서 경고 메시지가 출력된다

 

(6) isRequired를 사용하여 필수 propTypes 설정

새로운 매개변수로 favoriteNumber를 설정하고 propTypes 에서 끝에 isRequired를 지정해준다

 

// MyComponent.js
import React from 'react';
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;

 

propType에는 string, number 이외에도 다양한 종류가 있다

 

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회한다

propTypes는 함수형 컴포넌트의 방식과 동일하게 설정할 수 있다

 

// MyComponent.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props;
    return (
      <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
        <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
    );
  }
}

MyComponent.defaultProps = {
  name: '기본 이름',
};

MyComponent.propTypes = {
  name: PropTypes.string,
  favoriteNumber: PropTypes.number.isRequired,
};

export default MyComponent;

 

클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 있다

 

// MyComponent.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';

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

export default MyComponent;

 

defaultProps와 propTypes는 필수는 아니지만 다른 사람과 협업할 때 가독성을 좋게 해준다