(React Router v6) 리액트에서 라우터 사용하기-1

 

 

Router v5에 대한 설명은 하지 않습니다.

 

React-router-dom에는 여러개의 컴포넌트가 있습니다.

 

몇 가지만 적어보자면

 

1. BrowserRouter

React Router는 여러가지의 형태의 라우터를 지원합니다. 리액트 네이티브에서 사용할 수 있는 NativeRouter도 있죠.

우리는 지금 앱이 아닌 브라우저에서 돌아가는 웹 개발을 하고 있습니다. 그래서 "브라우저 라우터"로 외우시면 됩니다.

 

BrowserRouter는 간편 URL(Clean URL이라 합니다)을 이용하여 브라우저 주소창에 현재 위치를 저장합니다. 그리고 브라우저에 내장된 히스토리 스택을 사용해서 탐색합니다. 

 

최초에 프로젝트를 실행할 때 모든 App이 실행되는 곳에 이 컴포넌트로 감싸줘야 합니다.

보통은 index.js 이거나 App.js가 됩니다. 

 

저는 Vite로 프로젝트를 시작했기 때문에 main.jsx로 되어있네요.

 

예시코드

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

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

이렇게 전체 App 컴포넌트를 감싸주면 라우트를 하기 위한 기본적인 세팅이 끝납니다.

 

 

2. Routes

앱 어디에서든 렌더링된 Routes 컴포넌트는 현재 위치에서 아래 자식 routes의 집합과 매칭됩니다.

 

자식 routes란, <Route> 컴포넌트를 말합니다. (자식은 s가 없습니다. 유의하세요.)

위치가 변경될 때마다 모든 하위 경로를 훑은 다음에 가장 잘 맞는 자식 라우트를 찾아서 매칭한 후에 해당 UI를 그립니다.

 

<Routes> 안에 자식으로 있는 <Route>는 중첩이 가능합니다. 

<Route>안에 <Route>가 존재할 수 있다는 것입니다.

 

요약하자면,

Routes (s가 있음)는 우리가 이동하고자 하는 Route를 감싸고 있어야 합니다.

Route에는 홈페이지 내에서 우리가 이동하고 싶은 주소를 작성합니다.

 

 

3. Route (Routes 안에 들어가는 자식)

Route안에 들어가는 파라미터에서 기억할 것은 path와 element입니다.

path에는 이동할 주소를 입력하고, element에는 실제로 그려져야하는 UI가 있는 컴포넌트명을 적습니다.

 

예시 코드

import { Route, Routes } from "react-router-dom";
import "./App.css";
import BookList from "./pages/BookList";
import Home from "./pages/Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/books" element={<BookList />} />
    </Routes>
  );
}

export default App;

이렇게 적게 되면

localhost:000에는 Home 컴포넌트가 뜨고,

localhost:000/books에는 BookList 컴포넌트가 뜨게 됩니다.

 

일일이 주소를 입력하기 힘드니, 해당 컴포넌트로 이동할 수 있는 링크 연결을 만들어 봅시다.

 

우리가 보통 다른 주소로 연결할 때는 <a> 태그에 href 속성을 이용하지만,

React Router에서는 이 대신 <Link> 태그에 to 속성을 이용합니다.

 

이렇게 해야지 리액트 상에서 필요한 부분만 바뀔 수 있습니다.

 

 

예시코드

import { Link, Route, Routes } from "react-router-dom";
import "./App.css";
import BookList from "./pages/BookList";
import Home from "./pages/Home";

function App() {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/books">Books</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  );
}

export default App;

 

 

현재 화면

 

제 Home 컴포넌트 코드에 Welcome Home이라고 적혀있어서 그렇습니다.

 

Home.jsx 코드

import React from "react";

const Home = () => {
  return (
    <div>
      <h1>Welcome Home</h1>
    </div>
  );
};

export default Home;

 

신기한 점은 위에서 링크를 클릭해서 다른 컴포넌트로 넘어가면

화면 전체가 새로고침이 되는 것이 아니라는 것입니다.

 

React Router는 필요한 해당 Routes내에서 페이지 전체를 새로고침하는 것이 아닌

바뀌어야 하는 부분만 빠르게 바꿔줍니다.

 

이 부분이 굉장히 중요합니다.

 

 

다음 글에서는 HashRouter, HistoryRouter에 대해서 알아보겠습니다.