Props의 type 알기

	<Btn text="Save Changes" fontSize={18} />
	<Btn text={14} fontSize={"Continue"} />

위와 같이,
text 라는 애는 string을, fontSize라는 애는 number를 전달하고 싶은데 실수로 다른 타입의 값을 넣는다면,
잘못 작성한 것이지만 문법상의 오류는 없기 때문에 ReactJS가 캐치하지 못한다.
ReactJS가 알아채고 경고문을 띄우게 하기 위해

PropTypes

를 활용할 수 있다.

script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"

추가해주고

컴포넌트.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.string,
	}

위와 같은 방법으로 prop의 타입을 지정해준다면
만약 지정한 타입이 아닌 다른 타입으로 입력됐을 경우
콘솔창에

위와 같이
string 으로 expected 되는 Btn의 prop "text"의 타입이 number 이다.
라고 경고문이 뜬다.

마찬가지로
.isRequired 도 있다.

 Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number,
    };

이렇게 작성해주면
text 라는 prop이 컴포넌트 안에서 누락되어있을 경우,
콘솔창에 다음과 같은 경고문이 뜬다.

---

+++++

자바스크립트 문법을 통해 정의되지 않은 변수에 관한 기본값을 부여할 수 있다.
무슨 말이냐면,

        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text={"Continue"} />
        </div>

1. 두번째 버튼에는 fontSize라는 prop이 없는 상황에서

    function Btn({ text, fontSize = 30 }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
            fontSize,
        //  = fontSize : fontSize
        // 이름이 같아서 생략해서 작성한 것
          }}
        >

prop 자리의 fontSize = 지정값
을 설정해주면

적용이 되는 것을 볼 수 있다.