7. Router

##Router 사용자가 요청한 URL의 서브디렉토리에 따라서 결과물을 렌더링합니다.

라우터를 사용하게 되면 처음부터 웹에서
사용 할 모든 컴포넌트들을 먼저 불러와두고,

페이지를 이동할 때 마다 그때 그때 페이지를
처음부터 로딩하지 않고 필요한 컴포넌트만 다시 렌더링합니다.

Header 같은 부분처럼 변동이 없는 부분들은 리로딩되지 않고 유지됩니다.

참고
https://css-tricks.com/learning-react-router/
https://velopert.com/1173

설치
npm install --save react-router

Single Router Sample

var Home = React.createClass({
  render: function() {
    return (<h1>Welcome to the Home Page</h1>);
  }
});

ReactDOM.render((
  <Home />
), document.getElementById('root'));

...

ReactDOM.render((
  <Router>
    <Route path="/" component={Home} />
  </Router>
), document.getElementById('root'));

Multi Router Sample
DEMO> http://codepen.io/bradwestfall/pen/reaWYL

Router Container 컴포넌트 만들기
class App extends React.Component {
    render() {
 
        return (
                <div>
                    <ul>
                        <li><Link to="home">Home</Link></li>
                        <li><Link to="about">About</Link></li>
                        <li><Link to="articles">Articles</Link></li>
                    </ul>
                    {this.props.children}
                </div>
        );
    }
}



Link는 Router 내장 컴포넌트

<a href="..."> 테그와 기능은 같으나
a 테그는 페이지 자체를 리로딩하는 반면 Link는 this.props.children 부분만 리로딩합니다.
<Component>.........</Component>   모든 컴포넌트에는 props.children을 기본적으로 가지고 있습니다.
            children

ReactDOM 렌더링 및 Router 설정

 ReactDOM.render(<Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "articles" component = {Articles} />
      </Route>
   </Router>, document.getElementById('root'));

class Home extends React.Component {
    render() {
        return (
            <h2>Hey, I am HOME!</h2>
        );
    }
}
 
class About extends React.Component {
    render() {
        return (
            <h2>Hey, I am ABOUT!</h2>
        );
    }
}
 
class Articles extends React.Component {
    render() {
        return (
            <h2>Hey, I am ARTCILES!</h2>
        );
    }
}