[React.js] prop-types란? / 사용법

prop-types란?

React.js에서 매개변수의 타입을 지정해 줄 수 있게 해주는 라이브러리 ( 보안 작업, 타입스크립트랑 동일한 기능 )

 

prop-types 설치

npm i prop-types

 

prop-types 사용법

// Test.js - 컴포넌트 만들기

const Test = ({string, number}) => {
  return (
    <div>
      <span>{string}</span>
      <span>{number}</span>
    </div>
  );
};

export default Test;

 

// App.js - 컴포넌트 사용하기

// 컴포넌트 매개변수 검사하기 위한 PropTypes 불러오기 
import PropTypes from "prop-types";

// 컴포넌트 불러옴
import Test from "./Test";

function App() {
  const num = 1;
  return (
    <Test string="string", number={num}/>
  );
}

// 매개변수 검사하기
Test.propTypes = {
  // string 변수는 "문자열" 변수가 "필수적"으로 들어가야한다.
  string: PropTypes.string.isRequired,
  // number 변수는 "숫자" 변수가 "선택적"으로 들어가야한다.
  number: PropTypes.number,
}

export default App;