210819
Web_React #7
import React, {Component} from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
Hey~ React!!!
</div>
);
}
}
export default App;이 코드는 App.js의 코드이다.
여기서 class App extends Component는 react가 가지고있는 Component 클래스를 상속해서 새로운 App이라는 class를 만드는 것이다. 아래의 render()라는 method를 가진다는 의미다.
이것이 component를 만드는 코드이다.
이 코드를 활용해서 이전에 pure.html의 <header>태그의 내용을 subject라는 이름의 태그로 바꿔보자.
-pure.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>-App.js
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
}App.js안에 이 부분을 추가한다.
그러면 이 Subject라는 class에는 header태그 부분의 내용이 들어가는 것이다.
다음으로 기존의 App부분을
class App extends Component {
render() {
return (<div className="App">
Hey~ React!!!
</div>);
}
}class App extends Component {
render() {
return (<div className="App">
<Subject></Subject>
</div>);
}
}수정해준다.
div class가 App인 태그 안에 header태그가 생겼다.
react 코드 상에서는 Subject이지만, 웹 브라우저상에서는 header라는 태그로 바뀌어져있다.
최종적으로는 웹 브라우저에게 html코드를 공급하기 때문에 React라는 존재를 알지 못한다.
이런 방식으로 component를 만들 수 있다.
공부중인 것들 기록