<리액트의 유용성>
리액트가 없다고 가정했을때와 있을때를 비교하면서
리액트의 유용성을 느껴보자.
Public이라는 디렉토리는 우리가 create-react-app에서 yarn start를 했을때
파일을 찾는 다큐먼트 루트이다.
저 Public 디렉토리에 리액트가 아닌 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>
이 정도 웹페이지는 우리가 관리하기 편할것이다.
그러나 각 코드부분이 천만줄이라고 상상해봤을때,
코드가 한눈에 안들어온다.
저 태그는 다른곳에 안보이게 감추고 이름만 <Subject></Subject>로 한다면 가독성이 좋아질것이다.
<컴포넌트 만들기>
아래 코드는 컴포넌트를 만드는 코드이다.
저 코드를 해석해보면 App이라는 class를 만들고,
리액트의 Component라고하는 리액트가 가지고 있는 class를 상속해서
새로운 class를 만드는거고, 그 class는 render()라고하는 메소드를 가지고 있는것.
Subject라고 하는 컴포넌트를 만들어서 아까 html의 헤더태그를 대체해보자.
주의할점은 항상 최상위 태그로 시작해야된다.
여기서는 헤더가 최상위 태그다.
import React, { Component } from 'react';
import './App.css';
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>
);
}
}
export default App;
App부분에 웹 브라우저가 알아들을수 있는 헤더 태그가 생겼다.
컴포넌트 이름에만 집중하게 함으로써 복잡도를 획기적으로 낮췄다.
마지막으로 완성된 HTML 과 리액트의 코드를 비교해보자.
<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><React>
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;
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'React > React 기본' 카테고리의 다른 글
| [생활코딩] React -Component 파일로 분리하기 / State / key (0) | 2020.08.14 |
|---|---|
| [생활코딩] React - props / React Developer Tools (0) | 2020.08.14 |
| [생활코딩] React - CSS / 배포 (0) | 2020.07.26 |
| [생활코딩] React - 샘플 웹앱 실행 (0) | 2020.07.25 |
| [생활코딩] create-react-app 설치 (0) | 2020.07.25 |
댓글