컴포넌트 기본값 설정하기
방법 1. Component.defaultProps 를 사용하여 내부 props 값들을 임시 지정이 가능하다.
<body>
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Component extends React.Component {
render() {
return (
<div>
<h1>
{this.props.message} massage 데이터 입니다.
</h1>
</div>
)
}
}
//기본값은 여기서 설정
Component.defaultProps = {
message : "기본값",
};
ReactDOM.render(
<Component/>,
document.querySelector("#root")
)
</script>
</body>
방법 2. static defaultProps 사용하여 설정
( 해당 방법은 function(hook) 사용일 경우 적용되지 않음!)
<body>
<div id="root">
</div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class Component extends React.Component {
render() {
return (
<div>
<h1>
{this.props.message} massage 데이터 입니다.
</h1>
</div>
)
}
//class extends 사용시에만 가능합니다
static defaultProps = {
message: "기본값"
}
}
ReactDOM.render(
<Component />,
document.querySelector("#root")
)
</script>
</body>
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍