React Router

chu·2021년 3월 10일

개인적으로 개념을 다지기 위한 리액트 라우터 첫번째 시간

react-router 왜 쓰는걸까?

SPA(Single Page Application)에서는 사이트의 페이지가 하나의 페이지로 일을 진행한다. 하지만 주소를 이동해서 다른 페이지를 화면에 보이게 하고 싶을 때 이 router를 사용하면 된다.
react에서는 react-router를 사용한다.

간단하게

url path 경로에 따라 해당하는 컴포넌트로 화면에 교체해준다.

사용방법

npm으로 간단하게 설치를 해주자.

npm i react-router react-router-dom

Client.jsx

import React from 'react';
import ReactDOM from 'react-dom';

// react-router-dom에서 BrowserRouter를 불러온다.
import { BrowserRouter } from 'react-router-dom';

// 메인으로 불러올 컴포넌트
import App from './App';

ReactDOM.render(
  // 불러온 BrowserRouter로 App을 감싸준다.
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.querySelector('#root'),
);

그럼 App은 어떤 구조로 되어 있는지 확인해보자.

App.jsx

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

// 컴포넌트 불러오기.
import Home from './Components/Home';
import About from './Components/About';
import User from './Components/User';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/user">조회</Link>
        </li>
      </ul>
      <Switch>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
        <Route path="/user" component={User} />
      </Switch>
    </div>
  );
};

export default App;

Route - 이동할 페이지에 대해서 정의를 해준다.
Link - a 태그가 아닌 Link로 감싸주며, to로 주소를 적어준다.
(a 태그도 가능하지만, Link로 해야 바뀐 정보에 대해서만 리렌더링이 일어나게 된다.)
Switch - Switch로 Route를 감싸주면, Route를 위에서 아래로 Link의 해당되는 주소를 찾을 시 멈추고, 주소에 해당되는 페이지를 보여주게된다.
(즉, javascript의 switch case문을 생각하면 된다.)

대략 간단한 소개는 이렇고, Route에 어떻게 정의를 할지 살펴보자.