반응형
⭐ 1. component 만들기
- 보통 HTML 코드 작성 시
<html>
<body>
<header>
<h1>web</h1>
world wide web!
</header>
<nav>
<ul>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javaScript</a></li>
</ul>
</nav>
<article>
<h2>html</h2>
html is HyperText Markup language.
</article>
</body>
</html>
↓
- class 내부로 넣어서 component 생성
import React, { Component } from 'react';
import './App.css';
class Subject extends Component{
render(){
return(
<header>
<h1>web</h1>
world wide web!
</header>
);
}
}
class TOC extends Component{
render(){
return(
<nav>
<ul>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javaScript</a></li>
</ul>
</nav>
)
}
}
class Content extends Component{
render(){
return(
<article>
<h2>html</h2>
html is HyperText Markup language.
</article>
)
}
}
class App extends Component {
render(){
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
- render 앞에 일반적으로는 function붙는데, class안에 소속되어있는 함수는 function 생략
※ component 만들때 주의 사항 ※
- 반드시 하나의 최상위 태그로 시작해야한다. ex) header, div
↓
⭐ 2. props
import React, { Component } from 'react';
import './App.css';
class Subject extends Component{
render(){
return(
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
class TOC extends Component{
render(){
return(
<nav>
<ul>
<li><a href="1.html">html</a></li>
<li><a href="2.html">css</a></li>
<li><a href="3.html">javaScript</a></li>
</ul>
</nav>
)
}
}
class Content extends Component{
render(){
return(
<article>
<h2>{this.props.title}</h2>
{this.props.desc}
</article>
)
}
}
class App extends Component {
render(){
return (
<div className="App">
<Subject title="web" sub="world wide web!"></Subject>
<Subject title="react" sub="for UI"></Subject>
<TOC></TOC>
<Content title="html" desc="html is HyperText Markup language."></Content>
</div>
);
}
}
export default App;
props =비슷= attribute
↓
⭐ 3. component 분리하기
export default 파일이름 → 해당 class를 가져다 사용할 수 있게 한다, 외부에서 사용할 수 있도록 허용
'React' 카테고리의 다른 글
| setup / props / state / data fetch (0) | 2020.11.03 |
|---|---|
| Update, Delete 기능 구현 (0) | 2020.10.28 |
| Component 이벤트 만들기 (0) | 2020.10.26 |
| props / state (0) | 2020.10.22 |
| React 개발환경 구축하기 (0) | 2020.10.19 |
