일단 우리는 3가지의 링크가 필요하다 🕵️♀️필수
<script src="./js/react.development.js" defer></script> <script src="./js/react-dom.development.js" defer></script> <script src="./js/babel.min.js" defer></script>
HTML
DOM 연동의 개념을 이해하기 위해
HTML
에는 root
와 app
을 만들어 두었다.
<div id="root"></div>
<div id="app"></div>
Script
우선 JSX
문법을 사용하기 위해 script의 type은 text/bable 로 꼭 적어준다. <script type="text/babel">
defaultProps 란?
클래스 컴포넌트의 기능으로 props에 기본값을 세팅할 수 있도록 도와준다.
1번 예제
Section1Component.defaultProps={
title: 'section1Component',
name: '가나다',
tel: '010-9999-8888'
}
Section1Component
의 defaultProps
를 만든다.
title
: section1Component,name
: '가나다',tel
: '010-9999-8888'그리고 나서 클래스형
함수에 만들어 준다.
class Section1Component extends React.Component{
render(){
return(
<div>
<section id="section1" style={{width:'100%', height: '100vh', display:'flex'}}>
<h2 style={{margin:'auto', fontSize:'70px',color:'#39c'}}>{this.props.title}</h2>
<h3 style={{margin:'auto', fontSize:'50px',color:'#39c'}}>{this.props.name}</h3>
</section>
</div>
);
}
}
section
안에 h2와 h3를 보면 {this.props.title}
과 {this.props.name}
가 있다.
<h2 style={{margin:'auto', fontSize:'70px',color:'#39c'}}>{this.props.title}</h2>
<h3 style={{margin:'auto', fontSize:'50px',color:'#39c'}}>{this.props.name}</h3>
위에 defaultProps
로 만들어둔 title
: section1Component 이 나올것이고 name
: '가나다'가 나올것이다.
결과
section1Component 가나다
2번 예제
🕵️♀️ 2번 예제는 defaultProps를 클래스형 컴포넌트 안에서 만들어본다.
👩🏫 [tip] : render
안에는 자바스크립트가 사용가능하다.
class Section2Component extends React.Component {
static defaultProps={
title:'Section2 Component',
name:'다나까',
kor: 100,
eng: 99,
mat: 100
}
render() {
let {title,name,kor,eng,mat}=this.props
return (
<div>
<section id="section2" style={sec2Style}>
<h2 style={sec2Styleh2}>{title}</h2>
<h3 style={sec2Styleh3}>{name}</h3>
<h3 style={sec2Styleh3}>{kor}</h3>
<h3 style={sec2Styleh3}>{eng}</h3>
<h3 style={sec2Styleh3}>{mat}</h3>
</section>
</div>
);
}
}
👩🏫 [tip] : 1번예제와 달리 이번은 this.props를 사용하지 않고 바로 {name} , {title} 등을 쓰고싶을 때
let {title,name,kor,eng,mat}=this.props
변수로 담아서 this.props
를 생략하여 사용할 수 있다.
또는 스타일을 입력할 때도 마찬가지이다.
const sec2Styleh3={
margin:'auto',
fontSize:'50px',
color:'#000'
}
변수안에 스타일들을 담아서 아래 예제와 같이 사용가능
👇👇이렇게
<h3 style={sec2Styleh3}>{name}</h3>
결과
section2Component 다나까 100 99 100
ReactDOM.render(
<Section1Component/>,
document.getElementById('root')
);
ReactDOM.render(
<Section2Component/>,
document.querySelector('#app')
)
아까 처음에 설명한 root
와 app
이 있었다
<div id="root"></div>
<div id="app"></div>
Section1Component
는 root
로 Section2Component
는 app
으로 연동한다.