React Router

리액트에는 SPA 방식을 사용하여 페이지가 하나밖에 없는데 화면전환을 어떻게
하는 것인가 항상 궁금하였다.

페이지를 다시 요청하지 않고 화면전환을 하는 방식은 컴포넌트를 교체하는 방식으로
사용하면 되는 것이었다.

이것을 편리하게 해줄 수 있는 방법이 바로 ReactRouter를 사용하는 방식이다.

해당 라이브러리를 사용하면 편리하게 페이징 라우팅을 할 수 있다.
라이브러리 설치 방법은 다음과 같다.

npm install react-router-dom@6

맨뒤에 붙은 6은 버전을 뜻하는 것이다. 설치가 완료되면 화면 전환을 할 파일에서
라이브러리를 호출하면된다.

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

import RouteTest from "./component/RouteTest";

import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>APP.JS</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary" element={<Diary />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

가장 먼저 알아야 하는 것이 바로 BrowserRouter이다.
이것을 가장 최상위 태그에 감싸주는 형식으로 만들어준다. BrowserRouter 안에 있는 것들은 브라우저 url과 매핑될 수 있다.

그 다음 이동할 페이지 컴포넌트를 Routes 태그로 묶어준 후에 연결할 컴포넌트들을 하나씩 Route에 선언 해주고 속성 path에 연결할 라우터 링크, element에는 컴포넌트 태그를 써줌으로써 연결을 할 수 있다.

페이지 이동

보통 우리가 MPA 형식의 웹사이트를 이용할 때 페이지를 이동할 때 사용하는 기술로는 a태그가 있을 것이다. a태그를 사용하면 페이지가 이동되지만 다시 페이지를 요청하기 때문에 리엑트의 장점인 SPA형식의 목적에 벗어 나기때문에 a태그는 외부 사이트 요청을 할 때만 사용하고 나머지는 지양한다.

그럼 SPA환경에서 페이지를 이동할 때 사용하는 방법은 어떤 것이 있을까?

Link

react-router-dom 라이브러리에는 Link라는 기술이 있다. 이것을 사용하여 페이지를 이동하면 SPA형식을 사용한 페이지 교체를 할 수 있다.

import { Link } from "react-router-dom";
const RouteTest = () => {
  return (
    <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>DIARY</Link>
      <br />
      <Link to={"/new"}>NEW</Link>
      <br />
      <Link to={"/edit"}>EDIT</Link>
    </>
  );
};

export default RouteTest;

Link를 사용하고 내부 속성의 to에 페이지 라우터 주소를 연결해주면 된다.
a 태그의 href와 같다고 생각하면 된다.

이렇게 지정을 해주면 아까 Route태그에서 path로 지정한 경로와 맞는 컴포넌트가 호출이 되면서 페이지가 이동하는 것처럼 컴포넌트가 교체된다.