728x90
src폴더 아래 App.js
class Subject extends Component {
render(){
return (
<header> // 컴포넌트를 만들때는 최상위 태그부터 만들어야한다.
<h1>WEB</h1>
world wide WEB
</header>
)
};
}
class App extends Component {
render(){
return (
<div className="App">
<Subject></Subject>
</div>
)
};
}
코드 작성 후 서버를 올려보면
이렇게 화면이 출력되는 것을 확인할 수 있다.
더 추가해 보자.
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">js</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>
)
};
}코드 작성 후 서버를 올려보면
정상적으로 컴포넌트들이 추가되어 올라간 것을 확인할 수 있다.
<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">js</a></li>
</ul>
</nav>
<article>
<h2>html</h2>
html is hyperText Markup Language.
</article>
</body>
</html>
이 코드와 같은 코드로 동작한 것이다.
컴포넌트를 잘 활용해보자!~
728x90
'FrontEnd > react' 카테고리의 다른 글
| [react] shouldComponentUpdate (0) | 2023.02.02 |
|---|---|
| [react] 이벤트에서 state 변경하기 (3) | 2022.12.29 |
| [react] State (4) | 2022.12.28 |
| [react] Props 기초 (6) | 2022.12.27 |
| [react] 리액트 설치 (4) | 2022.12.27 |