Props

Props 사용 예시

• 아래는 여러 컴포넌트에서 공통으로 사용되는 버튼 컴포넌트를 구현한 코드이다.
• 버튼 틀을 만들어놓고, 버튼 text, type, onClick 함수 등을 props로 넘겨서 각 상황에 맞게 사용할 수 있다.

MyButton.js

const MyButton = ({ text, type, onClick }) => {
    const btnType = ["positive", "negative"].includes(type) ? type : "default";

    return (
        <button
            className="MyButton"
            onClick={onClick}
        >
            {text}
        </button>
    );
};

MyButton.defaultProps = {
    type: "default",
};

MyButton.propTypes = {
	type: PropTypes.String,
}

export default MyButton;

defaultProps

• props의 기본값을 설정
• 위의 코드의 경우, btnType이 ["positive", "negative"] 중에 속하지 않는 엉뚱한 값을 전달받거나 아무것도 전달받지 않은 경우, "default"라는 기본값으로 설정된다.

propTypes

• props의 타입을 지정
• 위의 코드의 경우, type이라는 props의 타입을 string으로 지정하였다.