[React] React-router-dom

👻 왜 라우터를 써야하는가

리액트는 SPA(Single Page Application) 방식으로써, 여러개의 페이지를 사용하며, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 말합니다.

리액트를 사용하지 않는다면 새로운 페이지를 로드할 때마다 새로운 페이지를 로드하는 방식의 MPA(Multi Page Application9) 방식을 사용해왔습니다.

예를 들어, A라는 사이트에 방문했고, A 사이트의 about페이지에 들어가는 상황을 생각해봅니다.

만약 MPA 방식이라면 메뉴바의 About 메뉴를 누름에 따라 index -> about 페이지로 이동하는 방식이겠지만,
SPA 방식에서는 하나의 HTML 페이지 안에서 index와 about에 대한 js 파일을 가지고 렌더링되는 방식입니다.

단순하게 설명하자면,
현재 페이지를 완전히 다시 로드해서 새로 구성을 하느냐
필요한 데이터만 가지고 와서 재로드 없이 렌더링을 하느냐의 차이입니다.

아무래도 위의 차이 때문에 여러 페이지들이 존재하는 서비스를 만들 때, SPA방식을 사용하면 좀 더 빨라지고, 유저의 만족도가 올라가기 때문입니다.

Routing

url 주소나 특정상태에 따라서 view를 보여주는 것을 말합니다.
React 자체적으로 기능이 내장되어있지 않으며, React-router라는 라이브러리를 가장 많이 사용합니다.

👻 React-router

React-router-dom 설치

npm i react-router-dom

설치하면 package.json파일에 react-router-dom이라는 코드가 생성되어있는 것을 확인할 수 있습니다.

Link

html의 <a> 태그와 유사한 기능으로 to prop을 통해서 이동할 경로를 지정해줍니다.

<Link to ="/about">About</Link>

만약 About을 클릭하면 주소창의 경로가 도메인/about으로 갱신됩니다.

Route

현재 주소창의 경로와 매치될 경우 보여줄 컴포넌트를 지정하는데 사용됩니다.
path prop을 통해서 매치시킬 경로를 지정하고 component prop을 통해서 매치되었을 때 보여줄 컴포넌트를 할당합니다.

<Route path="/about" component={About}>

그리고 현재 주소창의 경로가 /about인 경우 About 이라는 컴포넌트를 보여주고, 일반적인 현재 주소창의 URL경로에 따라 특정 컨텐츠를 보여주거나 숨기기 위해서 사용될 수 있습니다.

Router

<Route>와 <Link> 컴포넌트가 함께 잘 동작하도록 묶어줄 때 사용합니다.
<Route>와 <Link> 컴포넌트는 DOM트리 상에서 항상 <Router>를 공통 상위 컴포넌트로 가져야 합니다.

<Router>
  <Link></Link>
  <Router />
</Router>

React router 기초

app.js 상단에 컴포넌트를 import해줍니다.

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

이때, React router는 여러개의 Router 컴포넌트를 제공하지만 여기서는 BrowserRouter를 사용하겠습니다.

• Link

<header>
  <Link to="/">
    <button>Home</button>
  </Link>
  <Link to="/about">
    <button>About</button>
  </Link>
  <Link to="/mypage">
    <button>My page</button>
  </Link>
</header>

<Link> 컴포넌트를 사용 시 <Header> 부분을 리펙토링.
to prop에는 해당 메뉴를 클릭 시 이동해야할 경로를 지정해줍니다.
index 페이지의 경우 /를 사용합니다.

• Route

<main>
  <Route exact path="/" component={Home}>
  <Route exact path="/about" component={About}>
  <Route exact path="/mypage" component={MyPage}>
</main>

main 부분은 <Route>컴포넌트를 사용한다. path prop에 매치 할 때 비교될 경로를 지정하고, component prop에 매치할 때 보여줄 컴포넌트를 할당합니다.

이 때, 첫 번째 <Route>에 exact prop이 사용된 이유는 React Router의 디폴트 매칭 규칙 때문입니다.
exact prop이 없다면 home 컴포넌트가 URL경로와 상관없이 항상 보여지게 됩니다. 하지만 exact prop을 붙여주면 URL경로 값이 <Route>의 path 값과 전체가 일치해야 매치가 일어나고 처리를 해줍니다.

👻 Conclusion

app.js

import React from 'react';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import Home form './Home';
import About form './About';
import MyPage form './MyPage';

function App() {
  <BrowserRouter>
    return(
      <Route>
        <header>
          <Link to="/">
            <button>Home</button>
          </Link>
          <Link to="/about">
            <button>About</button>
          </Link>
          <Link to="/mypage">
            <button>My page</button>
          </Link>
        </header>
        <main>
          <Route exact path="/" component={Home}>
          <Route exact path="/about" component={About}>
          <Route exact path="/mypage" component={MyPage}>
        </main>
      </Route>
    );
  </BrowserRouter>
}
export default App;