[React] props types 자료형, 필수 값, 기본 값 지정

니콜라스 쌤의 노마드코더 'ReactJS로 영화 웹 서비스 만들기' 보면서 공부한 내용입니다.
부족한 내용이나 잘못된 내용은 댓글남겨주시면 감사하겠습니다!

출처 : https://nomadcoders.co/react-for-beginners

 

이전글에 이어,

[React] React.memo() : 리렌더링 방지 방법

이번에는 props types에 대해 알아보겠습니다.

 

1. 상이한 자료형 사용

ReactJS자체에서는 지정한 props가 어떤 타입으로 작성을 했는지 모른다고 합니다.

그래서, 이런 말도 안 되는 코드가 작동이 되죠.

 

버튼 1은 text를 문자형으로, fontSize를 숫자로 설정을 해서 사용하고 있는데

버튼 2은 반대로 사용하고 있음에도 불구하고 오류가 나지 않습니다.

function Btn({ text, fontSize }) {
    return (
        <button
            style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: "10px",
                fontSize,
                //fontSize: fontSize 둘이 이름이 같기 때문에 이렇게 사용 가능
            }}
        >
            {text}
        </button>
    );
}
function App() {
    return (
        <div>
            <Btn text="Save Changes" fontSize={18} />
            <Btn text={14} fontSize="Save Changes" />
        </div>
    );
}

2. PropTypes 사용

리액트 팀으로부터 PropTypes라는 패키지가 있고 이것을 사용하면 어떤 타입의 prop를 받고 있는지를 체크해줄 수 있습니다. 

 

필요한 패키지를 import 해주고, 

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

 

PropTypes로 props 타입을 지정을 해주면

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

 

다음처럼 지정한 자료형과 다른 자료형을 사용했다는 경고문구를 확인할 수 있습니다.

 

3. props 필수 값 지정

props를 필수 값으로 지정하고 싶을 경우에는  isRequired 옵션을 사용하면 됩니다.

// PropTypes로 props 타입 지정
Btn.propTypes = {
    text: PropTypes.string,
    fontSize: PropTypes.number.isRequired,
};
function App() {
    return (
        <div>
            <Btn text="Save Changes" fontSize={18} />
            <Btn text={"Continue"} />
        </div>
    );
}

 

 

4. props 기본 값 설정

정의되지 않은 props 값을 default으로 설정할 수도 있습니다. Javascript 문법으로 매우 간단하게요.

function Btn({ text, fontSize = 14 }) {
    return (
        <button
            style={{
                fontSize,
                //fontSize: fontSize 둘이 이름이 같기 때문에 이렇게 사용 가능
            }}
        >
            {text}
        </button>
    );
}

 

다음 글에서는 Create React App에 대해 공부해보겠습니다.

[React] create react app 프로젝트 세팅

 

읽어주셔서 감사합니다.