리액트 라우터 사용하기

리액트 라우터

 

리액트는 웹페이지를 새로고침 하지 않고도 화면이 바뀌는 싱글 페이지 애플리케이션 (=SPA)를 만들 수 있다. 그래서 페이지 이동이 빠르고 부드럽게 느껴진다.

 

리액트 라우터 돔을 설치하는 방법은 먼저,

yarn add react-router-dom

터미널에 입력해 설치한다.

 

// 1. 필요한 것들 가져오기
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    // 2. BrowserRouter로 감싸기
    <BrowserRouter>
      {/* 3. Routes로 감싸기 */}
      <Routes>
        {/* 4. Route로 경로 설정 */}
        <Route path="/" element={<div>메인페이지</div>} />
        <Route path="/products" element={<div>상품리스트</div>} />
        <Route path="/products/1" element={<div>상품1번 페이지</div>} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

그리고 리액트 라우터 돔에서 필요한 것들을 가져오고, 페이지를 이동할 수 있도록 앱 전체를 브라우저 라우터로 감싼다.

또 이 라우트들을 그룹으로 감싸고, 각 경로에 어떤 컴포넌트를 보여줄지 Route로 경로 설정을 한다.

 

그리고 App.jsx 파일에 페이지를 연결한다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Main from "./pages/Main";
import Products from "./pages/Products";
import Product from "./pages/Product";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/products" element={<Products />} />
        <Route path="/products/1" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

 

이제 페이지를 이동하고 싶다. 그러면 Link나 navigate를 사용하면 되는데 무슨 차이가 있느냐 하면

 

1. Link

a 태그처럼 동작하지만 새로고침 하지 않고 페이지를 이동할 수 있다.

 

2. useNavigate

a 태그 없이 이동할 수 있다. 약간 추가적으로 실행할 로직, 코드가 있다거나 하면 네비게이트를 쓰라고 하셨던 걸로 기억

 

---

 

그럼 상세 페이지는 어떻게 이동을 하느냐...

 

useParams 훅을 이용해 url에서 상품 id를 가져오면 된다.

여러 제품의 상세 페이지를 만들 때 매번 새로운 라우터를 추가하는 것은 번거로우니껜,,,

    <Route path="/products/:id" element={<Product />} />

이렇게 만들고,

 

import { useParams } from "react-router-dom";

export default function Product() {
  const { id } = useParams();

이렇게 가져오면 된다는 얘기!

 

만약 products/1로 이동한다면 id는 1이 된다.