[React] React router

---

0.라우터 (Router)

라우팅(Routing)은 웹 애플리케이션에서 사용자가 요청한 URL에 따라 적절한 페이지나 컴포넌트를 표시하는 과정을 의미한다. 즉 Controller 역할 수행하며 url에 page를 Mapping하는것이다.

 

 

 

 

1.React router

React Router는 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리이다.
본래 다른 URL로 이동하게 되면 SPA를 유지하지 못하며 다시 해당 URL에 매핑되는것을 불러와야하지만 해당 React router가 있다면 React 애플리케이션의 URL 경로에 따라 어떤 컴포넌트를 렌더링할지 제어하기에 
전체 페이지를 새로 고침하지 않고, URL만 변경하면서 다른 화면을 표시하는 방식을 사용할수있다.

 

 

URL 경로에 맞는 컴포넌트를 렌더링하지만, 실제로는 애플리케이션이 동적으로 해당 컴포넌트를 로드합니다. 
페이지를 새로 고침하지 않고도 경로를 변경하여 다른 컴포넌트를 렌더링할 수 있습니다.

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

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

function Home() {
  return <h2>홈 페이지</h2>;
}

function About() {
  return <h2>소개 페이지</h2>;
}

 

 

 

 

 

1-1.useParams

React Router에서 지원하는 훅이다. 
동적 URL 파라미터를 추출하는곳에 사용할수있다. 

예를 들어 쇼핑물 페이지에서 해당 제품의 상세 페이지에 들어가면 각각 상품들의 페이지에 대해 모두 페이지를 만드는것이 아니라 동적 파라미터를 이용해 추출한 제품 ID를 통해 페이지를 로드하는 방식으로 사용할수있다.

 

 

element를 통해서 해당 누른 Item의 id를 동적파라미터에서 추출해서 ItemDetail을 넘겨주는모습이다.

import { BrowserRouter as Router, Route, Link, Routes, useParams } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/item/1">아이템 1</Link>
        <Link to="/item/2">아이템 2</Link>
      </nav>

      <Routes>
        <Route path="/item/:id" element={<ItemDetail />} />
      </Routes>
    </Router>
  );
}

function ItemDetail() {
  // URL에서 동적 파라미터(id)를 가져옵니다.
  const { id } = useParams();

  return <h2>아이템 ID: {id}</h2>;
}

 

 

 

 

1-2.useLocation

React Router에서 제공하는 훅이다.
현재 URL의 위치 정보를 추출하는데 사용한다.
다음과같은 정보들을 얻을수있다.

• pathname: 현재 URL의 경로 부분(예: /home, /about).
• search: URL의 쿼리 문자열(예: ?id=1).
• hash: URL의 해시 부분(예: #section).
• state: 이전 경로에서 전달된 상태값.

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

function LocationDisplay() {
  // 현재 위치 정보 가져오기
  const location = useLocation();

  return (
    <div>
      <h3>현재 경로 정보</h3>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
      <p>Hash: {location.hash}</p>
    </div>
  );
}

 

 

 

 

1-3.useNavigate

React Router에서 제공하는 훅이다.
사용자가 특정 경로로 이동하도록 유도할 수 있다. (로그인이 성공하면 홈페이지로 이동같은거)

 

• navigate('/new-path'): 지정한 경로로 이동.
• navigate(-1): 이전 페이지로 이동(뒤로 가기).
• navigate('/new-path', { replace: true }): 이동 후, 새 경로가 브라우저 히스토리에서 이전 경로를 덮어쓰게 만듬 (뒤로 가기 시 새 경로가 나타나지 않음).

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

function NavigateExample() {
  const navigate = useNavigate();

  const handleClick = () => {
    // '/home' 경로로 이동
    navigate('/home');
  };

  const handleBack = () => {
    // 이전 페이지로 돌아가기
    navigate(-1);
  };

  return (
    <div>
      <button onClick={handleClick}>홈으로 이동</button>
      <button onClick={handleBack}>뒤로 가기</button>
    </div>
  );
}