Routing

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것

SPA (Single Page Application)

React는 SPA 방식이다.

• MPA 방식처럼 새로운 페이지를 로드하는 방식이 아님
• 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가짐
• React-Router: 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있음
  - 종류: 'BrowserRouter', 'HashRouter'

Static vs Dynamic

react는 정적(static)과 동적(dynamic)을 지원한다.

• static routing은 말 그대로, 미리 선언된 경로만 렌더링 가능하다.
• dynamic routing은 변화가 가능한 path parameter을 이용하기 때문에 렌더링 될때 routes가 결정된다.

---

✔️설치하기

npm install react-router-dom

✔️예시코드 (정적 라우팅)

• Home.js

const Home = (() => {
    return (
        <div>
            <h1>HOME</h1>
            <p>이곳은 홈입니다.</p>
        </div>
    )
})

export default Home

• App.js

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

import Home from './pages/Home'
import Edit from './pages/Edit';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/edit" element={<Edit />} />
        </Routes>
        <RouteTest />
      </div>
    </BrowserRouter>
  );
}

export default App;

App.js 코드 분석

1. BrowserRouter을 이용하여 컴포넌트 감싸기
2. <Routes>와 <Route> 사용: 컴포넌트는 여러 Route를 감싸서 조건에 맞는 라우트 하나만을 렌더링 해줌

👀결과1

• '/' 접속
  

• '/edit' 접속
  

---

✔️예시코드 (동적 라우팅)

• Diary.js

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

const Diary = (() => {
    const { id } = useParams()
    console.log(id)
    return (
        <div>
            <h1>Diary</h1>
            <p>이곳은 일기 상세 페이지입니다.</p>
        </div>
    )
})

export default Diary

• App.js (아래 코드 추가)

<Route path="/diary/:id" element={<Diary />} />

👀결과2

• console로 id값이 잘 찍히는지 확인
• '/Diary/1'로 접속했을때, console에 1값이 잘 찍히는것을 확인할 수 있음