Post List

2016년 10월 21일 금요일

react-router-tutorial #02 rendering-a-route

이번에는 디렉토리를 이동하여 02-rendering-a-route 을 살펴보기로 하자.

디렉토리 이동 후 기본적으론 npm install 을 해 준다.

1. index.js를 열어 아래와 같은 작업을 해보자

  • Router, Route, hashHistory 를 import 한다.
  • render 에 Router 를 추가하기로 한다.




현재 Code 는 아래와 같다.

[binrang@binrang 01-setting-up]$ cd ../02-rendering-a-route/
[binrang@binrang 02-rendering-a-route]$ ls -al
합계 28
drwxrwxr-x.  3 binrang binrang 4096 10월 21 14:22 .
drwxrwxr-x. 16 binrang binrang 4096 10월 21 14:22 ..
-rw-rw-r--.  1 binrang binrang 2041 10월 21 14:22 README.md
-rw-rw-r--.  1 binrang binrang  156 10월 21 14:22 index.html
-rw-rw-r--.  1 binrang binrang  140 10월 21 14:22 index.js
drwxrwxr-x.  2 binrang binrang   19 10월 21 14:22 modules
-rw-rw-r--.  1 binrang binrang  563 10월 21 14:22 package.json
-rw-rw-r--.  1 binrang binrang  252 10월 21 14:22 webpack.config.js
[binrang@binrang 02-rendering-a-route]$ vi index.js
import React from 'react'
import { render } from 'react-dom'
import App from './modules/App'
render(<App/>, document.getElementById('app'))

이 코드를 아래와 같이 수정한다.

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
render((
    <Router history={hashHistory}>
        <Route path="/" component={App}/>
    </Router>
), document.getElementById('app'))


2. npm start 를 한 후 브라우저에서 http://localhost:8080 을 열어보면 아래와 같은 화면을 볼 수 있다.

3. 이번에는 두 개의 컴포넌트를 추가 해보자.

아래 디렉토리로 이동하여 보면 App.js 파일만 있다. 여기에 두개의 파일을 생성할 것이다.
[binrang@binrang 02-rendering-a-route]$ cd modules/
[binrang@binrang modules]$ ls -al
합계 8
drwxrwxr-x. 2 binrang binrang   19 10월 21 14:22 .
drwxrwxr-x. 4 binrang binrang 4096 10월 21 15:43 ..
-rw-rw-r--. 1 binrang binrang  125 10월 21 14:22 App.js
[binrang@binrang modules]$ 

[binrang@binrang modules]$ vi About.js
import React from 'react'
export default React.createClass({
  render() {
    return <div>About</div>
  }
})

[binrang@binrang modules]$ vi Repos.js
import React from 'react'
export default React.createClass({
  render() {
    return <div>Repos</div>
  }
})

그 다음 상위 디렉토리로 이동해서 index.js를 수정하자.

[binrang@binrang 02-rendering-a-route]$ vi index.js 
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
render((
    <Router history={hashHistory}>
        <Route path="/" component={App}/>
        <Route path="/repos" component={Repos}/>
        <Route path="/about" component={About}/>
    </Router>
), document.getElementById('app'))

4. npm start 쉘의 반응과 웹 화면을 살펴보자

webpack: bundle is now INVALID.
Hash: b647350ba7579dbe7dd0
Version: webpack 1.13.2
Time: 290ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.09 MB       0  [emitted]  main
chunk    {0} bundle.js (main) 1.03 MB [rendered]
   [75] ./index.js 991 bytes {0} [built]
  [297] ./modules/About.js 454 bytes {0} [built]
  [298] ./modules/Repos.js 454 bytes {0} [built]
     + 296 hidden modules
webpack: bundle is now VALID.

응?. 뭐야 변화를 못 느끼겠다.

http://localhost:8080/#/about 입력하니 이런 화면을 만나게 된다.

http://localhost:8080/#/repos 입력하니 이 화면을 만나게 된다.

오... 이제 뭔가 필이 온다....ㅎㅎ

.

참고 URL : 02-rendering-a-route