React. React Js - PropTypes

PropTypes

 

 

만약, 우리가 fontSize에 해당하는 prop의 값을

number로 주지 않고 text로 주면 어떻게 될까?

 

return (
  <div>
    <Btn text="Save Changes" fontSize={18} />
    <Btn text={13} fontSize={"hello"} />
  </div>
);

function Btn({ text, fontSize }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }

 

React는 이것을 오류라고 알려주지 않는다.

왜냐면 문법적으로는 틀린 것이 없으므로.

 

따라서, 우리는 propTyes라는 패키지를 다운받아서 사용할 수 있다.

propTyes는 컴포넌트명.propTypes라고 하여 객체의 형식으로

컴포넌트의 prop별로 타입을 지정해줄 수 있다.

 

예를 들면,

Btn 컴포넌트의 text 속성은 string으로,

fontSize 속성은 number로 설정해준다.

 

 

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

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

 

Issue 🔻

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>

 

나는 이부분에서 잘 동작이 안되어서

production.min을 development로 수정했더니 잘 작동한다.

 

 

 

 

type 오류 발생

 

물론 코드 동작을 막아주진 않지만,

콘솔에서 개발자들에게 '오류'라는 창을 띄움으로서 큰 효과를 줄 수 있다.

 

 

---

 

📌 isRequired

 

 

위에서는 각 prop의 type을 지정해주었다면,

이 prop은 반드시 적어야한다! 를 설정해주자.

예를 들면, 이 예제에서 fontSize를 필수로 적어줘야 한다고 치자.

 

 

App 컴포넌트에서 Btn컴포넌트 두개를 설정할 때

두 번째 Btn에는 fontSize를 주지 말고 진행해보자.

 

return (
        <div>
          <Btn text="Save Changes" fontSize={18} />
          <Btn text={"Continue"} />
        </div>
      );

 

PropTypes.number 뒤에 .isRequired를 붙여준다.

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

 

🔻 콘솔창 확인시

isRequired 적용시 - 오류

 

 

 

 

function Btn({ text, fontSize = 12 }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize,
          }}
        >
          {text}
        </button>
      );
    }

 

App에서 설정해준 prop을 Btn의 첫번째 argument로 전달해줌.

Btn의 첫번째 argument는 props라는 객체이며,

객체이므로 {prop1, prop2} 와 같이 쓸 수 있다.

 

또한, 각 prop의 기본값을

fontSize = 12와 같이 적어줄수도 있음.

(만약, fontSize prop을 주지 않았을 때 기본값)

function Btn({ text, fontSize = 12 }) {

 

 

---

Ref. 

Free Lecture

 

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders