[JS]react-router 적용해보기

개요

react-router 란 클라이언트 사이드에서 주소값의 변경에 따라 페이지 혹은 컴포넌트의 변화를 제공하기 위한

라이브러리 입니다.

예를 들어 사용자가 회원가입을 위해 /join 에 접근했을 때, react-router는 회원가입 페이지를 렌더링해줍니다.

react-router는 페이스북에서 공식으로 지원하고 있는 라이브러리는 아니지만, 많은 사용자를 보유하고 있다고 합니다.

설치

  npm 을 사용하여 react-router-dom 을 설치해줍니다.

> npm install --save-dev react-router-dom

################################

react-router와 react-router-dom의 차이 :

react-router는 코어까지 들어있는 master 브랜치에 있는 라이브러리 입니다.

그리고 react-router-dom은 그 중에서 DOM이 인식할 수 있는 컴포넌트들만 뺀 라이브러리 입니다. 예를 들어 <Link>(a태그로 렌더링되는), <BrowserRouter>와 같은 컴포넌트들이 있습니다. 그래서 코어까지 필요하지 않다면 react-router-dom 을  사용하는 것이 좋지 않을까? 라는 생각에 react-router-dom을 선택하였습니다.

#################################

사용방법

 먼저, 여러분의 index.js에서 상단에 모듈을 불러오기 위한 코드를 작성해줍니다.

import { BrowserRouter } from 'react-router-dom';

그리고 index.js 의 중간부분에서 여러분의 root 컴포넌트를 <BrowserRouter> 로 감싸주세요.

이는 우리가 구현할 어플리케이션에 BrowserRouter를 적용한 것 입니다.

const rootElement = document.getElementById('root');

ReactDOM.render(

<BrowserRouter>

<App/>

</BrowserRouter>,

document.getElementById('root')

)

그리고, webpack.config.js에서 설정을 해줘야 합니다.  개발 서버를 지정하는 부분에 다음 코드를 넣어줍니다.

historyApiFallback: true

 이 설정은 어플리케이션으로 어떤 요청이 오던 기본이 되는 index.html을 보여주도록 설정을 해줍니다. 

링크를 직접 입력하여 접근을 할 때는 서버 라우트를 한번 거치게 되는데, 이때 서버는 리액트 앱으로

연결해줘야 합니다. 그래서 다음과 같은 설정을 해주지 않으면 404가 뜨게 됩니다.

결과적으로 devServer는 이렇게 보입니다.

devServer: {

inline: true,

port: 3000,

contentBase: __dirname + '/public',

historyApiFallback: true

}

다음으로는 요청에 따라 컴포넌트 혹은 페이지를 다르게 보여주는 작업을 해볼 것 입니다.

우리는 App.js에서 먼저 '/' 경로로 들어가면 로그인 페이지를 보여줄 것이고, /join 경로로 들어가면 회원가입 페이지를

볼 수 있게 할 것 입니다.

App.js에서 다음과 같이 모듈을 불러와주세요.

import { Route, Switch } from 'react-router-dom';

<Route>와 <Switch>는 경로를 컴포넌트와 매칭시키기 위한 라우트 컴포넌트 입니다.

Route는 경로와 컴포넌트들을 매칭하여 경로와 컴포넌트가 매칭이 된다면 그 컴포넌트를 보여줍니다.

만약 맞는 경로가 아니라면 null을 반환합니다.

예를 들어 어플리케이션에 라우팅 정보가 '/' 와 '/join' 밖에 없는데 '/logout' 을 호출한다면 null을 반환하여 

화면에 아무것도 보이지 않습니다. (404가 아닙니다!)

<Route exact path="/" component = { Login }/>

다음과 같이 사용할 수 있습니다. 여기서 exact 키워드는 정확한 path 가 들어왔을 때만 컴포넌트를 렌더링 해줍니다.

또한, 여러개의 <Route> 그룹핑 하여 사용할 수도 있습니다.

<Switch>

<Route exact path="/" component = { Login }/>

<Route path = '/join' component = { Join }/>

</Switch>

switch 는 모든 <Router> 요소들을 반복하면서, 현재위치와 일치하는 첫번째 요소만 렌더링 해줍니다.

이는 경로가 동일한 컴포넌트들이 있을 때, 그리고 매칭되는 경로가 없을 때 식별할 때 도움이 됩니다. 

만약 매칭되는 경로가 없을 때는 <Route> 와 달리 404페이지를 반환해줍니다.

그리하여 path를 사용하여 컴포넌트들을 렌더링 하는 전체코드는 다음과 같습니다.

import React from 'react';

import Login from './container/Login';

import Join from './container/Join';

import { Route, Switch } from 'react-router-dom';

class App extends React.Component {

constructor(props) {

super(props);

}

render() {

return(

<Switch>

<Route exact path="/" component = { Login }/>

<Route path = '/join' component = { Join }/>

</Switch>

);

}

}

export default App;

다음은 <Link> 태그를 사용하여 컴포넌트 이동을 해보도록 하겠습니다. 사용하는 방법은 간단합니다.

<Link to = "/">안녕</Link>

와 같이 <Link to = "경로"> </Link> 를 사용하여 경로를 이동할 수 있습니다.