참고사이트
https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
React - YouTube
www.youtube.com
2020/05/04 - [react/기초] - react 설치, 개발환경구축
2020/05/05 - [react/기초] - react 구조
- 순수 html 코드
위치 public > 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>
위 같은 순수html 코드는 한눈에 이해하기 쉽다. 하지만 소스가 1000만줄 정도라면 어떨까?
- react Component 생성코드 ( 순수 html 코드를 리액트로 변환, 즉component로 만듬)
위치 src > App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Subject() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
function App() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
export default App;1. pure.html의 header부분을 App.js에 Subject() component로 만듬
2. App() function에 <Subject></Subject> 넣어줌
Component 명은 대문자로 시작할것.!
- 추가 Component 생성코드
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Subject() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
function Nav(){
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>
);
}
function Article(){
return (
<article>
<h2>Html</h2>
Html is HyperText Markup Language.
</article>
);
}
function App() {
return (
<div className="App">
<Subject></Subject>
<Nav></Nav>
<Article></Article>
</div>
);
}
export default App;추가로 pure.html의 Nav, Article 부분을 Component로 만듬
결국 pure.html의 Subject, Nav, Article의 부분들을 위와같이 Component로 만들어서 사용할수 있다.
복잡도를 획기적으로 낮추는 효과가 있다.
'dev > react' 카테고리의 다른 글
| react 이벤트 (0) | 2020.05.17 |
|---|---|
| react state소개 및 사용 (0) | 2020.05.15 |
| react 속성(props), react Developer Tools 사용 (0) | 2020.05.13 |
| react 구조 (0) | 2020.05.05 |
| react 설치, 개발환경구축 (0) | 2020.05.04 |
참고사이트
https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi
React - YouTube
www.youtube.com
2020/05/04 - [react/기초] - react 설치, 개발환경구축
2020/05/05 - [react/기초] - react 구조
- 순수 html 코드
위치 public > 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>
위 같은 순수html 코드는 한눈에 이해하기 쉽다. 하지만 소스가 1000만줄 정도라면 어떨까?
- react Component 생성코드 ( 순수 html 코드를 리액트로 변환, 즉component로 만듬)
위치 src > App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Subject() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
function App() {
return (
<div className="App">
<Subject></Subject>
</div>
);
}
export default App;1. pure.html의 header부분을 App.js에 Subject() component로 만듬
2. App() function에 <Subject></Subject> 넣어줌
Component 명은 대문자로 시작할것.!
- 추가 Component 생성코드
import React from 'react';
import logo from './logo.svg';
import './App.css';
function Subject() {
return (
<header>
<h1>WEB</h1>
world wide web!
</header>
);
}
function Nav(){
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>
);
}
function Article(){
return (
<article>
<h2>Html</h2>
Html is HyperText Markup Language.
</article>
);
}
function App() {
return (
<div className="App">
<Subject></Subject>
<Nav></Nav>
<Article></Article>
</div>
);
}
export default App;추가로 pure.html의 Nav, Article 부분을 Component로 만듬
결국 pure.html의 Subject, Nav, Article의 부분들을 위와같이 Component로 만들어서 사용할수 있다.
복잡도를 획기적으로 낮추는 효과가 있다.
'dev > react' 카테고리의 다른 글
| react 이벤트 (0) | 2020.05.17 |
|---|---|
| react state소개 및 사용 (0) | 2020.05.15 |
| react 속성(props), react Developer Tools 사용 (0) | 2020.05.13 |
| react 구조 (0) | 2020.05.05 |
| react 설치, 개발환경구축 (0) | 2020.05.04 |
