라우팅이란? 🧐
경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, 경로를 지정하는 과정이라는 뜻이다.
페이지 라우팅이란? 🧐
URL 요청 경로에 맞게 적절한 페이지를 보여주는 과정이다.
예를 들어 도메인 주소가 winterlood.com인 웹 서비스에서 winterlood.com/blog URL로 페이지를 요청하는 모습은 다음과 같다.
이때 요청 URL에서 도메인 주소 winterlood.com/ 뒤에 붙는 blog나 books를 '경로(path)'라고 한다.
방법 👏
설치
npm i react-router-dom
설치가 끝나고 package.json 파일에서 확인해보면 다음과 같이 라우터가 제대로 설치 되었음을 알 수 있다.
라우터 적용하기
설치한 react-router-dom 라이브러리에서 BrowserRouter 컴포넌트를 불러온다.
그 뒤에 BrowserRouter를 App의 부모 컴포넌트로 설정한다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);라우터를 구현할 파일을 생성해준다.
react-router-dom 라이브러리에서 Routes와 Route 컴포넌트를 불러온다.
Routes 태그로 감싼 내부에 현해 URL 경로에 맞게 적절한 Route 컴포넌트를 페이지에 렌더링한다.
import "./App.css";
import { getEmotionImgById } from "./util.js";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";
import { Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="/edit" element={<Edit />} />
</Routes>
</div>
);
}
export default App;
결과를 확인에 보면 다음과 같이 적절한 경로에 내용이 화면에 렌더링 되었음을 알 수 있다.
페이지 이동 구현
HTML에서의 a태그와 동일한 기능으로 페이지 이동 방법으로는 Link 컴포넌트가 있다.
<Link to = '이동할 경로'>링크 이름</Link>다음과 같이 react-router-dom 라이브러리에서 Link 컴포넌트를 import 해준 뒤에 사용하면 된다.
import "./App.css";
import { getEmotionImgById } from "./util.js";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Edit from "./pages/Edit";
import { Link, Route, Routes } from "react-router-dom";
function App() {
return (
<div className="App">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/new" element={<New />} />
<Route path="/diary" element={<Diary />} />
<Route path="/edit" element={<Edit />} />
</Routes>
<div>
<Link to={"/"}>Home</Link>
<Link to={"/new"}>New</Link>
<Link to={"/diary"}>Diary</Link>
<Link to={"/edit"}>Edit</Link>
</div>
</div>
);
}
export default App;Home에서 이동하고자 하는 링크를 클릭하면 해당 페이지로 이동된다.
(다음은 New링크를 클릭했을 경우)
동적 경로 라우팅 🙈
동적 경로란 특정 아이템을 나타내는 id처럼 값이 변하는 요소를 URL에 포함하는 경우를 말한다.
동적 경로의 종류
URL 파라미터
URL에 유동적인 값을 넣는 방법으로 주로 id나 이름을 이용해 특정 데이터를 조회할 때 사용한다.
https://localhost:3000/diary/{id}
//id가 3일 경우
https://localhost:3000/diary/3쿼리 스트링
물음표 뒤에 key=value 문법으로 URL에 유동적인 값을 포함하는 방법이다.
주로 게시물 리스트에서 사용자가 정렬 조건을 선택하거나 현재 조회하는 게시판의 페이지를 표현할 때 사용한다.
https://localhost:3000?sort=latest
//값이 2개 이상일 경우
https://localhost:3000?sort=lates&page=1적용(URL 파라미터)
경로 설정하기
<Route path="/diary/:id" element={<Diary />} />id 자리에 임의의 숫자를 삽입했을 때 Diary 페이지가 렌더링 되었음을 확인했다.
URL 파라미터 값 불러오기
useParams이란 파라미터 값을 URL을 통해서 넘겨받은 페이지에서 사용할 수 있도록 해주는 것을 말한다.
import { useParams } from "react-router-dom";
const Diary = () => {
const { id } = useParams();
return (
<div>
<div>{id}번 일기</div>
<div>Diary 페이지입니다</div>
</div>
);
};
export default Diary;
URL의 경로에 따라서 id 값이 달라지는 것을 확인했다.
적용(쿼리 스트링)
쿼리 스트링은 URL 경로 다음에 ?로 구분하므로 URL 파라미터처럼 페이지 라우팅을 위한 별도의 설정이 필요 없다.
import { useSearchParams } from "react-router-dom";
const Home = () => {
const [searchParams, setSearchParams] = useSearchParams();
console.log(searchParams.get("sort"));
return <div className="Home">Home 페이지입니다.</div>;
};
export default Home;
localhost:3000?sort=apple로 접속해 쿼리 스트링으로 설정한 sort 값을 잘 불러 오는지 콘솔에서 확인한다.
만약 sort가 아닌 다른 값으로 접속한다면 null값이 들어간다.
