[React] 감정일기장 프로젝트 : 페이지 라우팅

페이지 라우팅

• 페이지 라우팅이란? 경로에 따라 알맞은 페이지를 렌더링 하는 과정이다.
• Multi Page Application (MPA)
  • 서버가 여러 개의 페이지를 갖고 있는 것을 말한다.
  • 많은 서비스가 사용하는 전통적인 방식이다.
  • 페이지 이동이 매끄럽지 않고 비효율적이다.
  • 서버의 부하가 심해진다. (요청이 많아질 경우 서버의 처리량이 많아지기 때문에)
• 서버 사이드 렌더링(SSR) : 클라이언트(브라우저)가 요청했을 때 서버가 미리 가지고 있던 html 페이지를 보내면 브라우저가 이를 화면에 보여주는 방식을 말한다.
• 클라이언트 사이드 렌더링(CSR) : 브라우저에서 자바스크립트 파일을 실행해서 직접 렌더링 하는 방식을 말한다.
• 리액트에서는 Single Page Application (SPA) 방식을 사용한다.
  • 페이지 이동이 매끄럽고 효율적이다.
  • 다수의 사용자가 접속해도 크게 상관 없다.
• 여러 자바스크립트 파일을 묶는 행위를 Bundling(묶다)이라고 한다. 그리고 묶어진 파일을 Bundle JS File이라고 부른다. 번들링 과정은 Vite가 하게 된다. 리액트의 문법으로 작성한 모든 정보들이 담겨 있기 때문에 이 파일을 ‘React App’ 이라고 부를 수 있다.
• 브라우저가 변경이 필요한 페이지만 컴포넌트를 교체하여 빠르고 효율적으로 페이지를 이동할 수 있다.
• React Router
  • npmjs.com에 등록되어 있는 라이브러리
  • 대다수의 리액트 앱이 사용하고 있는 대표적인 라이브러리로 모르면 간첩이다.
  • npm i react-router-dom 으로 설치 시작!

페이지 라우팅 설정

main.jsx

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

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

• <BrowserRouter>로 App을 감싸 주어야 한다. 그래야 App 하위에 있는 모든 자손 컴포넌트들이 페이지 라우팅과 관련된 데이터를 공급받을 수 있다.

App.jsx

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

// 1. "/" : 모든 일기를 조회하는 Home 페이지
// 2. "/new" : 새로운 일기를 작성하는 New 페이지
// 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/new" element={<New />} />
      <Route path="/diary" element={<Diary />} />
      <Route path="*" element={<Notfound />} />
    </Routes>
  );
}

export default App;

• 주의 사항 2가지
  • Routes 에는 Route 컴포넌트만 들어갈 수 있다. div나 다른 컴포넌트 넣으면 에러 빵빵
  • Routes 바깥에 배치된 요소들은 페이징 라우팅과는 관계없이 모든 페이지에 동일하게 렌더링 된다.

페이지 이동

App.jsx

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

// 1. "/" : 모든 일기를 조회하는 Home 페이지
// 2. "/new" : 새로운 일기를 작성하는 New 페이지
// 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지
function App() {
  const nav = useNavigate();

  const onClickButton = () => {
    nav("/new");
  };

  return (
    <>
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/new"}>new</Link>
        <Link to={"/Diary"}>Diary</Link>
      </div>
      <button onClick={onClickButton}>New 페이지로 이동</button>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  );
}

export default App;

• Link를 이용해야 페이지가 새로고침 되지 않고 빠르게 이동 할 수 있다.
• a 태그는 클라이언트 사이드 렌더링 방식으로 작동하지 않는다.
• 링크가 필요할 때는 Link 컴포넌트를 사용하고, 이벤트 핸들러 함수 안에서 특정 조건에 따라서 페이지를 이동시켜야 한다면 useNavigate 훅을 받아와서 사용하면 좋다.

동적 경로

• 동적인 데이터를 포함하고 있는 경로
  • URL Parameter : / 뒤에 아이템의 id를 명시 예) ~/product/1 ~/product
    • 아이템의 id 등의 변경되지 않는 값을 주소로 명시하기 위해 사용된다.
  • Query String : ? 뒤에 변수명과 값 명시 예) ~/search?q=검색어
    • 검색어 등의 자주 변경되는 값을 주소로 명시하기 위해 사용된다.

Query String 방법

Home.jsx

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

const Home = () => {
  const [params, setParams] = useSearchParams();
  console.log(params.get("value")); 
  // <http://localhost:5173/?value=hi라고> 넣었다면 hi가 출력된다.

  return <div>Home</div>;
};

export default Home;

• useSearchParams 훅을 사용하면 가져올 수 있다.

URL Parameter 방법

App.jsx

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

function App() {
  ...생략
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        **<Route path="/diary/:id" element={<Diary />} />**
        <Route path="*" element={<Notfound />} />
      </Routes>
    </>
  );
}

export default App;

• Route path="/diary/:id" 이렇게 명시해준다.

Dairy.jsx

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

const Diary = () => {
  const params = useParams();
  console.log(params);

  return <div>{params.id}번 일기입니닷!</div>;
};

export default Diary;

• useParams 훅을 사용하여 params 값을 가져올 수 있다.

 

출처 : 한입 크기로 잘라먹는 리액트