🧭 React Router

웹에서 React Router를 사용하기위해 react-router-dom 패키지를 사용합니다.

npm install react-router-dom

---

Router

react-router-dom 통해 BrowserRouter, HashRouter를 사용할 수 있습니다.
BrowserRouter는 HTML5 history API를 활용해서 UI를 업데이트 하며, 동적인 페이지에 적합합니다. HashRouter는 URL의 Hash를 이용한 라우터로 정적인 페이지에 적합합니다.

import { BrowserRouter as Router } from "react-router-dom";

function App() {
  return (
    <Router>
   		// Routes...
    </Router>
  );
}

export default App;

---

Routes & Route

Route는 엘리먼트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 엘리먼트, 함수를 렌더링합니다. Routes는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 합니다.

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/search" element={<Search />} />
        <Route path="detail/:id" element={<Detail />} />
      </Routes>
    </Router>
  );
}

export default App;

---

Link

HTML의 a 태그의 역활을 합니다. to속성에 설정된 링크로 이동하며 리프레시가 발생되지않아 React 컴포넌트의 상태가 유지됩니다.

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

<Link to={"/"}>Home</Link>

---

useParams

useParams는 Parameter값을 URL을 통해서 넘겨서 넘겨받은 페이지에서 사용할 수 있도록 도와줍니다. Route의 경로에 Parameter를 정해주고 해당 컴포넌트에서 useParams를 통해 Parameter를 불러올 수 있습니다.

<Route path="detail/:id" element={<Detail />} />

// Detail 컴포넌트
import { useParams } from "react-router-dom";

const { id } = useParams();

---

useNavigate

useNavigate는 페이지 이동시 사용할 수 있습니다. path를 정해주거나 number를 주어 페이지를 이동시킬 수 있습니다.

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

const navigate = useNavigate();

// useNavigate 사용
navigate("/") // "/" 페이지로 이동
navigate(-1) // 이전 페이지로 이동

---

useLocation

useNavigate를 이용해 전송된 쿼리 파라미터를 받을 수 있습니다. URL API인 URLSearchParams를 이용하여 원하는 쿼리 파라미터를 사용할 수 있습니다.

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

const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const query = queryParams.get("keyword");

URLSearchParams는 URL의 쿼리 문자열과 함께 작동하는 유틸리티 메서드를 정의합니다.

---

📝 후기

react-router-dom을 이용하여 React App에서 라우터를 이용할 수 있었습니다. 웹 페이지에서 라우터를 통해 파라미터값과 쿼리값을 넘겨 받고, 이를 이용해 API와 통신하여 웹 페이지는 동적인 웹 페이지에 한 단계 더 가까워졌습니다.

---

본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.

#프로젝트캠프 #프로젝트캠프후기 #유데미 #스나이퍼팩토리 #웅진씽크빅 #인사이드아웃 #IT개발캠프 #개발자부트캠프 #리액트 #react #부트캠프 #리액트캠프