⚛️React Training - section04 : propsTypes

이번 시간에는 propsTypes에 관해서 포스팅을 해볼 것이다. propTypes은 React에서 컴포넌트의 props에 대한 유형을 검사하고 정의하는 데 사용되는 기능이다. 이는 코드의 안정성을 높이고 잘못된 사용 또는 전달된 데이터에 대한 오류를 미리 방지하는데 도움이 된다. 이는 TypeScript와 비슷한 역할을 하는 것이지만 아직 propsTypes에 익숙하지 않아서 조금은 잘 모르겠다. 우선 현재 우리 CDN을 이용해서 코드를 작성하기에 porpsTypes를 사용하려면 CDN을 추가해야한다. 아래 코들르 추가하면 된다.

 

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

 

이를 추가하고 아래 코드를 작성하면 된다.

 

<script type="text/babel">

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

    console.log(text, "was Rendered")

    return (

      <div>

        <button

          style={{

            backgroundColor: "tomato",

            color: "white",

            padding: "10px 20px",

            border: 0,

            borderRadius: 10,

            fontSize,

          }}

        >

          {text}

        </button>

      </div>

    );

  }

  Btn.propTypes = {

    text: PropTypes.string.isRequired,

    fontSize: PropTypes.number,

  }

  function App() {

    const [value, setValue] = React.useState("Save Changes");

    const changeValue = () => setValue("Revert Changes");

    return (

      <div>

        <Btn text="Save Change" fontSize={18} />

        <Btn text="Continue" />

      </div>

    )

  }

  const root = document.getElementById("root");

  ReactDOM.render(<App />, root);

</script>

여기서 propsTypes의 각 코드를 살펴보면 우선 Btn 내부 컴포넌트에서 지정된 props 타입들을 정의했다. 먼저 text props는 string문으로 작성이 되어야하며 필수적으로 외부 컴포넌트에 porps가 존재 해야한다. 하지만 fontSize는 number로 필수적인 사항은 아니다. 그래서 App안에 있는 Btn 컴포넌트를 보면 둘다 text를 필수 적으로  가지고 있지만 fontSize는 선택적으로 존재한다. 이를 통해서 TypeScripts를 사용하지 않고 안정적으로 코드를 작성 할 수 있는 방법을 알아 보았다.