React-Router-dom

Routing

다른 주소에 따라 다른 뷰를 보여주는 과정

경로에 따라 변경한다는 의미

React Router

react 자체에는 routing 기능이 내장되어 있지 않으므로 react router라는 라이브러리를 많이 사용

사용법

설치

// 폴더에 react app 설치
$ npx create-react-app <folder>
$ cd <folder>

// react-router 라이브러리 설치
$ npm install react-router-dom
Shell
복사

App.js로 react-router 컴포넌트 꺼내오기

import React from "react";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
JavaScript
복사

사용환경 세팅

<BrowserRouter>
  <Switch>
    <Route path='' />
  </Switch>

  <Link to='' />
</BrowserRouter>
JavaScript
복사

주요 컴포넌트

<BrowserRouter> 라우터 역할

<Switch> 경로 매칭

<Route> 경로 매칭

<Link> 경로 변경

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

JavaScript
복사

Switch, Route

경로를 매칭해주는 역할을 하는 컴포넌트입니다.

•

<Switch> 컴포넌트는 여러 <Route>를 감싸서 그 중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. <Switch> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다.

•

<Route> 컴포넌트는 path 속성을 지정하여 해당 path에 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 Link 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동됩니다.

Link

경로를 연결해주는 역할을 하는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API 를 이용해 페이지의 주소만 변경해 줍니다.

ReactDOM으로 렌더를 시키게 되면 <Link> 컴포넌트는 <a> 태그로 바뀌는 모습을 볼 수 있습니다.

React Router 에서 <a> 태그가 아닌 <Link>를 사용하는 이유가 있나요?<a>태그는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시킵니다. 즉, 새로고침 현상이 일어나게 되죠. 하지만 <Link> 컴포넌트는 페이지 전환을 방지하는 기능이 내장 되어있기 때문에 SPA를 구현할 수 있습니다.

exact

React router의 특성상 exact속성이 없으면 해당 경로(예시의 "/")로 시작하는 중복된 <Route> 컴포넌트를 모두 보여줍니다. exact는 주어진 경로와 정확히 일치해야만 설정한 <Route> 컴포넌트를 보여주는 역할을 합니다.

import React from 'react';
import './App.css';
// TODO - react-router-dom을 설치 후, import 구문을 이용하여 BrowserRouter, Route, Switch 컴포넌트를 불러오세요.
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Sidebar from './Sidebar';
import Tweets from './Pages/Tweets';
// TODO - import문을 이용하여 MyPage, About 컴포넌트를 불러오세요.
import About from './Pages/About';
import MyPage from './Pages/MyPage';

const App = () => {
  return (
    <div>
      {/* TODO - BrowserRouter 컴포넌트를 작성합니다. */}
      <BrowserRouter>
        <div className="App">
          <main>
            <Sidebar />
            <section className="features">
              {/* TODO - Switch와 Route 컴포넌트를 이용하여 경로(path)를 설정하고 Tweets, Mypage, About 컴포넌트를 연결합니다. */}
              <Switch>
                <Route exact path="/">
                  <Tweets />
                </Route>
                <Route path="/about">
                  <About />
                </Route>
                <Route path="/mypage">
                  <MyPage />
                </Route>
              </Switch>
            </section>
          </main>
        </div>
      </BrowserRouter>
      
    </div>
  );
};

// ! 아래 코드는 수정하지 않습니다.
export default App;
JavaScript
복사