[노마드/React로 영화 웹 서비스 만들기] Ch04 PROPS | 2. Props Types

참고자료: 노마드 코더 ReactJS로 영화 웹 서비스 만들기 https://nomadcoders.co/react-for-beginners/lobby

1.  props types

---

<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script> 
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

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

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

    function App() { 
        return(
            <div>
                <Btn text="Save Changes" fontSize={18} />
                <Btn  fontSize={14} />
            </div>
        );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root); 
</script>

👉🏻전체 코드 참고ㅎㅎ

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

👉🏻text에는 string을, fontSize에는 숫자를 넣어야 하는데 두 번째 Btn처럼 잘못된 type의 값을 보낸는 상황이 있을 수 있다. 이러한 상황을 방지하기 위한 조치를 살펴보자.

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

👉🏻먼저 다음 script를 추가한다.

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

👉🏻Btn의 각 props의 PropTypes를 통해 type을 지정해준다.

• text props의 type은 string
• fontSize의 type은 number

👉🏻잘못되었다고 에러를 통해 알려주고 있다. 참고로 코드상에서 에러는 없기 떄문에 버튼이 잘 출력된다.

 

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

PropTypes와 함께 하는 타입 검사 – React

👉🏻해당 사이트를 참고해 PropTypes를 다양하게 활용해보자😊

 

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

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

👉🏻text props를 isRequired를 통해 필수 props로 만들고 두 번째 Btn에 text props를 전달하지 않았다.

👉🏻역시나 text가 누락되었다고 오류가 나고 있음! 이런식으로 잘 사용해보자!