리액트에서 라우팅 진행하기

react router dom

리액트의 react-router-dom은 SPA(Single Page Application)에서 라우팅을 쉽게 관리할 수 있게 하기 때문에 꼭 사용하는 라이브러리이다.

---

1️⃣ BrowserRouter

• 라우팅 컨텍스트를 제공하는 최상위 컴포넌트

1. History API 기반
   브라우저의 pushState, replaceState 메서드를 사용하여 URL을 동적으로 변경하고, 브라우저의 뒤로/앞으로 가기 버튼과 같은 기본 내비게이션 동작을 지원.
   페이지를 새로고침하지 않고 URL을 변경
2. 클라이언트 사이드 라우팅
   애플리케이션의 동작은 서버로 요청을 보내는 대신 클라이언트에서 처리되므로, 빠르고 부드러운 사용자 경험을 제공함
3. 루트 컴포넌트로 사용
   애플리케이션의 라우팅 컨텍스트를 설정하며, Route, Link, useNavigate와 같은 React Router 컴포넌트와 훅을 사용할 수 있게 한다.

예시

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = () => <h1>홈 화면</h1>;
const About = () => <h1>상세 정보 화면</h1>;

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

• 앱 전체를 감싸 URL 및 라우팅 컨텍스트를 제공한다.

---

2️⃣ useParams

useParams는 URL에 포함된 동적 파라미터를 가져올 때 사용한다.

예시

import React from 'react';
import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';

const User = () => {
  // 현재 페이지에서 userId라는 param을 가져와 사용한다.
  const { userId } = useParams();

  return <h1>User ID: {userId}</h1>;
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:userId" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

• URL 파라미터 정의: :userId처럼 경로에 동적 파라미터를 정의.
• 파라미터 접근: useParams를 사용하여 userId 값을 가져옴.

---

3️⃣ useLocation

• 현재 브라우저의 위치(location) 정보를 가져올 때 사용
• 현재 URL에 대한 정보를 담고 있는 location 객체를 반환하며, URL의 경로, 쿼리 문자열, 해시 등이 포함되어 있다.

---

Response: location 객체

속성
pathname	현재 경로 (예: /about 또는 /user/123)
search	URL의 쿼리 문자열 (예: ?name=Shine)
hash	URL의 해시 값 (예: #section1)
state	navigate로 데이터를 전달할 때 사용하는 상태 객체
key	특정 라우팅의 고유 키 (React Router가 내부적으로 사용)

---

예시

import React from 'react';
import { useLocation } from 'react-router-dom';

const ExampleLocation = () => {
  const location = useLocation();

  return (
    <div>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
};

export default ExampleLocation;

동작 예시

• URL이 다음과 같다면, http://localhost:3000/about?name=Shine#section1
• 출력:

  Pathname: /about
  Search: ?name=Shine
  Hash: #section1

---

URL 쿼리 파라미터 읽기 - URLSearchParams

import React from 'react';
import { useLocation } from 'react-router-dom';

const QueryParams = () => {
  const location = useLocation();
  // 쿼리 문자열을 읽을 수 있다.
  // location.search를 이용하기 위해서는 URLSearchParams를 사용한다.
  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>Query Parameters</h1>
      <p>Name: {queryParams.get('name')}</p>
    </div>
  );
};

export default QueryParams;

동작 예시

• URL: http://localhost:3000?name=John
• 출력:

  Name: John

---

state를 사용한 데이터 전달

React Router에서 navigate로 페이지 이동 시, 추가 데이터를 state로 전달할 수 있다.

예시

import React from 'react';
import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const goToNextPage = () => {
    navigate('/next-page', { state: { from: 'home-page', user: 'Shine' } });
  };

  return (
    <div>
      <button onClick={goToNextPage}>다음 페이지로 이동</button>
    </div>
  );
};

export default Home;

데이터 받기

import React from 'react';
import { useLocation } from 'react-router-dom';

const NextPage = () => {
  const location = useLocation();
  const { from, user } = location.state || {};

  return (
    <div>
      <p>From: {from}</p>
      <p>User: {user}</p>
    </div>
  );
};

export default NextPage;