Router - MoonGyeongHyeon/React

React - Router

Router는 사용자가 요청한 URL의 서브디렉토리에 따라 결과물을 렌더링해준다. 라우터를 사용하게 되면 처음부터 웹앱에서 사용할 모든 컴포넌트들을 먼저 불러와두고, 페이지를 이동할 때마다 그때 그때 페이지를 처음부터 로딩하지 않고 필요한 컴포넌트만 다시 렌더링한다.

예제

기본 페이지("/")와 하위 페이지 3개("/home", "/About", "Articles")를 구성한다. 라우팅 할 3개의 컴포넌트를 만들어보도록 하자.

편의를 위해 App.js에 모든 코드를 작성하도록 했다.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';

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>
        );
    }
}

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 ARTICLES!</h2>
        );
    }
}

var rootElement = document.getElementById('app');
ReactDOM.render((
    <Router>
        <div>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/articles" component={Articles}/>
        </div>
    </Router>
), rootElement);

부분부분 보도록 하자.

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link,
} from 'react-router-dom';

필요한 패키지를 import한다.

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 에 내장되어있는 컴포넌트 중 하나로, return <a {...props} onClick={this.handleClick} /> 처럼 동작한다. 링크를 해주는 a 태그와 같아보이지만 다른점은 클릭했을 때, <a href=".."> 태그는 페이지 자체를 리로딩해버리지만, <Link> 는 this.props.children 부분만 리로딩해준다.

this.props.children 은 따로 설정하는 props가 아니라 모든 컴포넌트가 기본적으로 가지고 있는 컴포넌트로, 컴포넌트를 사용할 때 <Component> <...> </Component> 에서 <...> 부분이 this.props.children 으로 자동 설정된다.

즉, "Home" 링크를 누르게 되면 ".../home" 에 해당하는 URL 요청이 이루어지고, 그 응답 결과를 this.props.children 부분에 리로딩을 하는 것이다.

var rootElement = document.getElementById('app');
ReactDOM.render((
    <Router>
        <div>
            <Route path="/" component={App}/>
            <Route path="/home" component={Home}/>
            <Route path="/about" component={About}/>
            <Route path="/articles" component={Articles}/>
        </div>
    </Router>
), rootElement);

라우터를 사용할 땐, <Router> <Route ...> ... </Route> </Router> 의 형태로 사용한다. path 속성은 URL 주소를 의미하며, component는 해당 URL에 상응하는 컴포넌트를 의미한다.

하지만 이대로 실행한다면 Cannot GET /Home 라는 결과를 볼 수 있다. 해당 주소를 서버에 요청하면 서버쪽 라우터에서 먼저 연결할 곳이 있는지 확인해보는데, 그 결과가 없기 때문에 이런 오류가 발생하는 것이다. 이를 위해 서버에 따로 설정을 해주어야 한다. webpack 개발 서버에서, webpack.config.js 파일에 코드 한줄을 추가해주도록 하자.

devServer: {
	/*...*/
        historyApiFallback: true
    },

historyApiFallback을 활성화해주면 이 문제가 해결된다.

Router - MoonGyeongHyeon/React_Study GitHub Wiki

React - Router

예제

⚠️ GitHub.com Fallback ⚠️

Router - MoonGyeongHyeon/React_Study GitHub Wiki

React - Router

예제

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️