[React] Props란? PropTypes로 타입 체크하기

💡 Props란 무엇인가?

• 부모 컴포넌트로 부터 전달받은 값.
• 컴포넌트의 속성(Property)를 의미한다.

 

✅ Props 특징

1. Readonly

상위 컴포넌트로 받은 Props는 컴포넌트에서 수정이 불가능하다.

 

💡

React는 단방향 데이터 흐름으로 하위 컴포넌트는 데이터를 받을 수 있지만 상위 컴포넌트에 넘길 수 없다. 만약 하위 컴포넌트에서 데이터를 수정해도 상위 컴포넌트는 이를 알 수 없기 때문에 Props는 수정이 불가하다.

 

2. 객체 타입이다.

컴포넌트는 반드시 1개의 argument를 갖는다. 상위 컴포넌트에서 하위 컴포넌트에 여러 Property를 넣어 전달해도 객체형태의 argument 하나만 받을 수 있다.

 

 

3. 구조분해 할당을 사용할 수 있다.

Props를 구조분해 할당을 사용하면 좀 더 편리하게 사용할 수 있다.

단, 구조분해 할당 시 property와 이름이 일치해야 가져올 수 있다.

 

 

4. Props에는 여러 형태의 데이터를 담을 수 있다.

String, Boolean 등등.. Function 도 가능하다.

 

 

 

---

 

Props를 사용해 하나의 컴포넌트로 두 개의 버튼을 그려보려 한다.

버튼의 value와 버튼의 font-size를 Props로 전송해보자.

 

 

1. App 생성

    const App = () => {
      return (
        <div>
          <Btn text="OK" fontSize={30}></Btn>
          <Btn text="NO" fontSize={15}></Btn>
        </div>
      );
    };

 

Btn 이라는 컴포넌트를 2개를 그려줬다. property로 text에는 button의 value에 들어갈 String을 fontSize에는 button의 font-size로 설정될 number를 작성했다.

 

💡

컴포넌트의 property와 html의 property는 다르다.
onClick과 같은 이벤트 리스너도 컴포넌트에선 그저 prop일 뿐이다.

 

 

2. 컴포넌트 생성

    function Btn({ text, fontSize }) {
      return (
        <button
          style={{
            fontSize,
          }}
        >
          {text}
        </button>
      );
    };

 

구조분해 할당을 사용해 text와 fontSize를 변수에 담았다. 컴포넌트의 property와 선언명이 같아야 한다.

 

 

3. render

두개의 value와 fontsize가 다른 버튼이 생긴다.

 

 

---

 

 

그런데, 만약 어떤 컴포넌트를 작성 시 text에 function을 보내거나 fontSize에 아무 데이터를 보내지 않으면 어떻게 될까?

 

fontSize는 undefined로 버튼의 text가 안보일 수는 있어도 text에 function을 보내는 것은 반드시 문제가 생길 것이다.

 

React는 이렇듯 Props의 데이터 타입을 잘 못 보낼 가능성을 염두하고 데이터 타입을 체크해주는 기능이 추가 되었다.

 

 

💡 PropTypes

    function Btn({ text, fontSize }) {
      return (
        <button
          style={{
            fontSize,
          }}
        >
          {text}
        </button>
      );
    };
    
    
    Btn.propTypes = {
      text: PropTypes.string.isRequired,
      fontSize: PropTypes.number,
    };

    const App = () => {
      return (
        <div>
          <Btn text="OK" fontSize={30} />
          <Btn text="NO" fontSize={15} />
        </div>
      );
    };

 

✅ 작성 시 주의할 점

1. 컴포넌트.propTypes = { }

대소문자에 유의하자. 객체형태로 작성할 수 있다.

 

2. 객체의 key값은 컴포넌트의 property

 

3. 객체의 value 작성

PropTypes (대소문자 주의)

PropTypes.(데이터타입).isRequired(필수값인지 옵션값인지)

 

4. array, bool, func, number, object ... 기본타입들이 있다.

 

5. 체크 가능한 기능은 다양하다. 공식문서 확인

https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html