반응형
컴포넌트 제작으로부터 시작해보겠습니다. 강좌에 의하면 React의 가장 기초적인 기능이 HTML 문서가 장대해질 경우 component를 별도 구성함으로써 코드를 단순화/정리정돈하는 기능이라고 합니다. 이것 만으로도 뭔가 React를 사용하고 있다는 느낌이 드네요.
1. 우선 App.js에서 <div className="App"> 태그 사이의 내용을 지우고 아래의 내용으로 교체해 넣습니다.
logo.svg파일을 임포트 하는 부분도 삭제해 줍니다.
import React, { Component } from 'react';
//import logo from './logo.svg'; 삭제
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
<header> {/*Subjct Component */}
<h1>WEB</h1>
world wide web!
</header>
<nav>{/*TOC Component */}
<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>{/*Content Component */}
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</div>
);
}
}
export default App;
결과물은 아래와 같이 나타나게 됩니다.
2. 다음으로 <header>, <nav>, <article> 부분을 이용하여 각각 Subject.js , TOC.js, Content.js component를 만듭니다. component들은 components라는 폴더를 만들고 그 내부에 생성합니다. (빈 편집창에서 rcc라고 치고 엔터를 치면 Class형 component 양식을 자동 구성해줍니다.)
Subject.js
import React, { Component } from 'react';
class Subject extends Component {
render() {
return (
<div>
<header>
<h1>WEB</h1>
world wide web!
</header>
</div>
);
}
}
export default Subject;
TOC.js
import React, { Component } from 'react';
class TOC extends Component {
render() {
return (
<div>
<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>
</div>
);
}
}
export default TOC;
content.js
import React, { Component } from 'react';
class Content extends Component {
render() {
return (
<div>
<article>
<h2>HTML</h2>
HTML is HyperText Markup Language.
</article>
</div>
);
}
}
export default Content;
3. App.js를 작성한 component를 이용하여 재구성합니다.
- 각각의 컴포넌트들을 import 해주고
- 각각의 컴포넌트들을 불러와 사용해준다.
import React from 'react';
import Subject from './components/Subject';
import TOC from './components/TOC';
import Content from './components/Content';
//import logo from './logo.svg'; 삭제
import './App.css';
function App() {
return (
<div className="App">
<Subject />
<TOC />
<Content />
</div>
);
}
export default App;
결과물이 최초 화면과 동일하게 나온다면 컴포넌트가 정상적으로 생성된 것으로 볼 수 있겠네요.
- 끝 -
반응형
'Programming > React' 카테고리의 다른 글
React기초- 6.이벤트 (0) | 2020.07.28 |
---|---|
React기초-5.state2 (0) | 2020.07.27 |
React기초-4.state (0) | 2020.07.25 |
React기초-3.props (0) | 2020.07.25 |
React기초-1.설치 및 환경설정 (0) | 2020.07.25 |
댓글