React Router 적용

1. 프로젝트 생성(미 생성시)

$ yarn create react-app <project name>

$cd <project name>
$yarn add react-router-dom

• 리액트 라우터를 설치할 때는 yarn을 이용하여 react-router-dom을 설치해야한다.

 

2. Router 적용

• src/index.js 파일에 react-router-dom에 내장 되어 있는 BrowserRouter라는 컴포넌트로 감싸야한다.
• BrowserRouter는 웹 애플리케이션에 HTML5의 History API를 사용하여 페이지를 새로고침하지 않고도 주소를 변경하고, 현재 주소에 관련된 정보를 props로 쉽게 조회하거나 사용할 수 있도록 해줌

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

3. Route로 특정 주소에 컴포넌트 연결

• Route라는 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여줄지 정의할 수 있음
• "<Route path="주소 규칙" component={보여줄컴포넌트} />"

import React from "react";
//import logo from "./logo.svg";
import Home from "./pages/Home";
import About from "./pages/About";
import { Route } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <div>
      <Home></Home>
      <Route path="/about" component={About}></Route>
    </div>
  );
}

export default App;

 

4. Link 컴포넌트를 사용하여 다른 주소로 이동하기

• 리액트 라우터를 사용할 때는 a 태그를 사용하면 안된다. a 태그는 페이지를 전환하는 과정에서 페이지를 새로 불러오기 때문에 리액트 애플리케이션이 초기화 된다.
• Link 컴포넌트를 사용하여 리액트 애플리케이션이 초기화되지 않고도 페이지 전환이 가능하다.
• 현재 상태 그대로 유지하면서 HTML5 History API를 사용하여 페이지의 주소만 변경해준다.
• Nuxt로 치면 기능상 nuxt-link와 동일한 것을 보임
• nuxt-link와 마찬가지로 react의 link에서도 컴포넌트 자체는 a태그로 되어 있지만 페이지 전환시 새로고침을 방지하는 기능이 내장되어 있음

import { Route, Link } from "react-router-dom";


...
        <li>
          <Link to="/about">소개</Link>
        </li>

...

 

5. 파라미터

• URL파라미터 예: /about/<parameter>
• 쿼리스트링 예: /about?<key>=<value>
• 쿼리스트링은 Vue와 동일하고 URL파라미터의 경우 Vue의 Dynamic Route와 동일하다.
• 쿼리 스트링을 객체로 변환할 때는 "qs" 라는 라이브러리를 사용하면 좋다.
• 설치방법은 "yarn add qs"
• location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되며 아래의 포맷을 갖는다.
• {
•  "pathname": </URL>
•  "search": ?<key>=<value>
•  "hash": ""
• }

 

6. 부가 기능

• history: match, location과 함께 전달되는 props 이고 컴포넌트를 구현하는 메서드에서 라우터 API를 호출할 수 있다.
• withRouter: 라우트로 사용된 컴포넌트가 아니더라도 math, location, history 객체에 접근가능
• Switch: 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만 렌더링 시켜준다. 따라서 모두 일치하지 않는 경우 404 Not Found 등 기능을 추가해줄 수 있다. <switch><route></route> .... </swtich>
• NavLink: 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일, CSS 클래스를 적용할 수 있는 컴포넌트
• NavLink에서 링크가 활성화되었을 떄의 스타일을 적용할 때는 'activeStyle' 값을, CSS 클래스를 적용할 때는 'activeClass' 값을 props로 넣어주면 된다.