해볼 예제는 <header>태그, <nav>태그, <article>태그의 내용들을 컴포넌트화를 통해
각각 분리하는 작업을 해볼 것이다.
public > pure.html 생성
<html>
<body>
<header>
<h1>WEB</h1>
world wider 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 Markup Language;
</article>
</body>
</html>컴포넌트화의 이유는, 이런 HTML코드가 만약 만줄 이상이 넘어간다면 작업이 피곤해지기 때문이다.
App의 기본구조에서 앞으로 계속 사용하고 익숙해져야 할 부분이
class XX extends Component {
render() {
return (
);
}
}
바로 이 부분이다. 컴포넌트화를 시키기 위해서는 이 코드자체를
하나의 실행 구문으로 외우는 게 편하다. 이제 새로운 컴퍼넌트를 만들어보자.
src > App.js
import { render } from '@testing-library/react';
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wider web!
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject><Subject>
</div>
);
}
}
export default App;순서
1. Subject라는 이름의 컴포넌트를 만들어준다. 이때 컴포넌트의 이름은 반드시 대문자로 시작
2. return()안에, html의 코드에서 따로 떼어줄 내용을 복붙해서 넣는다.
이때, 반드시 하나의 최상위 태그 하나만을 넣어줄 수 있다.
3. 마지막으로 className="App"안에 Subject를 태그이름으로 정의해준다.
=> 이렇게하면 App의 안쪽이 실행되면서 <Subject>태그를 Subject 컴포넌트로 알아듣고,
그 안의 태그들을 리턴해주는 결과가 나오게 된다.
src > App.js
import { render } from '@testing-library/react';
import React, { Component } from 'react';
import './App.css';
class Subject extends Component {
render() {
return (
<header>
<h1>WEB</h1>
world wider 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 Markup Language;
</article>
)
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject></Subject>
<TOC></TOC>
<Content></Content>
</div>
);
}
}
export default App;
nav와 article까지 결과적으로 다 변경해준 모습이다.
Subject와 마찬가지로 태그모양으로 App안에도 넣어주었다.
'프로그래밍 > React' 카테고리의 다른 글
| [React] state 사용하기 (다중속성) (0) | 2021.01.22 |
|---|---|
| [React] state 사용하기 (단일속성) (0) | 2021.01.22 |
| [React] 컴포넌트별로 파일 분리하기 (0) | 2021.01.22 |
| [React] props 사용하기 (0) | 2021.01.22 |
| [React] 쉽게 개발환경 세팅하기 + 디렉토리 구성 설명 (0) | 2021.01.22 |
