7. Router

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

라우터를 사용하게되면 처음부터 웹앱에서 사용 할 모든 컴포넌트들을 먼저 불러와두고, 페이지를 이동할 때 마다 그때 그때 페이지를 처음부터 로딩하지 않고 필요한 컴포넌트만 다시 렌더링 (즉, Header 같은 부분처럼 변동이 없는 부분들은 유지됨)

react-router 설치 npm install --save react-router

index.js import { Router, Route, browserHistory, IndexRoute } from 'react-router';

app.js import { Link } from 'react-router'

예제) 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 테그는 페이지 자체를 리로딩하는 반면 Link는 this.props.children 부분만 리로딩함. ......... 모든 컴포넌트에는 props.children을 기본적으로 가지고 있음 children

ReactDOM 렌더링 및 Router 설정 예제) ReactDOM.render( , document.getElementById('root'));