1.함수를이용한 컴퍼넌트
<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">
//babel : 예전브라우저, 순수한 자바스크립트로 변경
//https://babeljs.io/setup#installation 에서 cdn 가져올수 있다.
//즉, babel + jsx로 사용하게 되면 react > javascript로 바꿀수 있도록 컴파일 해줌
//함수를 이용한 Component
//props ---> {message = "안녕하세요"}
function Component(props){
//이부분이 렌더가 다시일어나는 부분
return (
<div>
<h1>{props.message}이것은 함수로만든컴퍼넌트</h1>
</div>
);
}2.함수형 Component 기본값 설정하기
//함수형 Component 기본값 설정하기
function Component(props){
//이부분이 렌더가 다시일어나는 부분
return (
<div>
<h1>{props.message}이것은 함수로만든컴퍼넌트</h1>
</div>
);
}
Component.defaultProps = {
message:"기본값"
}
3.class를 이용한 컴퍼넌트
class Component extends React.Component{
render(){
return (
<div>
<h1>{this.props.message}이것은 클래스로 만든 컴퍼넌트!</h1>
</div>
);
}
}
ReactDOM.render(<Component message = "안녕하세요"/>,document.querySelector("#root"))
4.class 컴퍼넌트에서 기본값 설정하기 (2가지방법)
기본적인 default 값 설정 방법은 동일하나 class컴퍼넌트에서는 static 키워드를 활용해도 가능함
//클래스에서 default값 설정하기
class Component extends React.Component{
render(){
return (
<div>
<h1>{this.props.message}이것은 클래스로 만든 컴퍼넌트!</h1>
</div>
);
}
static defaultProps = {
message:"기본값2"
}
}
// Component.defaultProps = {
// message:"기본값"
// }
ReactDOM.render(<Component />,document.querySelector("#root"))
참고문헌
'프론트엔드 공부 > react' 카테고리의 다른 글
| 이벤트적용(함수형,class) (0) | 2021.05.29 |
|---|---|
| 객체형state,constructor형 state/setState 두가지방법 (0) | 2021.05.29 |
| React JSX 문법 (0) | 2021.05.28 |
| ReactDOM.render / React.createElement(type,[props],[...children]) (0) | 2021.05.28 |
| react cdn 개념이해 (0) | 2021.05.28 |
