React[리액트]- Router 기본 예제 설명
① 리액트(React)에서는 URL 값에 따른 뷰(View)를 보여주는 Router를 제공한다.
② 렌더링(Rendering)을 서버쪽에서 담당하는 것은 자원 소모가 있으므로, 뷰(View) 렌더링을 브라우저에서 담당 하는 것이다.
③ 즉, 브라우저에서 압축과 캐싱 기능을 활용하여 렌더링을 후 서버에서 필요한 데이터만 전달받아 보여준다.
React Router + Redux 기본 구조
React Router + Redux 기반 어플리케이션의 일반적인 구조는 아래와 같다. 참고 하자.
React 라우터(Router) 예제 코드
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html> |
cs |
style.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30 |
body {
margin: 0;
font: 16px/1 sans-serif;
}
menu ul{
margin: 0;
padding: 0;
}
menu li {
display: inline-block;
padding: 5px;
}
a.active {
color: #444;
font-weight: bold;
text-decoration: none;
}
header {
padding: 10px;
background-color: #333;
color: #ccc;
font-size: 20px;
font-weight: bold;
}
menu {
background-color: #ccc;
padding: 5px;
margin-top: 0;
margin-bottom: 10px;
} |
cs |
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36 |
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, Link } from 'react-router';
import About from './About';
import Repos from './Repos';
import Home from './Home';
class App extends Component {
render() {
return (
<div>
<header>App</header>
<menu>
<ul>
<li><Link to="/home" activeClassName="active">Home</Link></li>
<li><Link to="/about" activeClassName="active">About</Link></li>
<li><Link to="/repos" activeClassName="active">Repos</Link></li>
</ul>
</menu>
{this.props.children}
</div>
);
}
}
render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="home" component={Home} />
<Route path="about" component={About} />
<Route path="repos" component={Repos}/>
</Route>
</Router>
), document.getElementById('root'));
|
cs |
Home.js
|
1
2
3
4
5
6
7
8
9
10
11 |
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<h1>HOME</h1>
);
}
}
export default Home; |
cs |
About.js
|
1
2
3
4
5
6
7
8
9
10
11 |
import React, { Component } from 'react';
class About extends Component {
render() {
return (
<h1>ABOUT</h1>
);
}
}
export default About; |
cs |
Repos.js
|
1
2
3
4
5
6
7
8
9
10
11 |
import React, { Component } from 'react';
class Repos extends Component {
render() {
return (
<h1>REPOS</h1>
);
}
}
export default Repos; |
cs |
React[리액트] - 예제 소스 실행
브라우저 테스트 화면
웹팩Webpack을 사용하면 더욱 편하게 실행 가능하다.
React[리액트] - 예제 소스(파일) 다운로드
다운로드
reactjs_router.zip
Redux(리덕스)에 대한 포스팅도 제작 중이다.
'웹 프론트 > React' 카테고리의 다른 글
| 리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기 (4) | 2018.02.28 |
|---|---|
| 리액트[React] - ES6 문법 + Babel 기초 예제 및 다운로드 (0) | 2018.01.06 |
| 리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드 (0) | 2017.10.15 |
![[좋은사람]](https://tistory1.daumcdn.net/tistory/1510577/attach/56b4c683045e4e5fb703da5a50954748){kind=small}