리액트 라우터 핵심 개념 정리

React Router

 

Outlet

자식 경로 요소를 렌더링 하려면 부모 경로 요소에서 <outlet>을 사용해야 한다.

이렇게 하면 하위 경로가 렌더링 될 때 중첩된 UI가 표시될 수 있다.

부모 라우트가 정확히 일치하면서 자식 인덱스 라우트를 렌더링하거나 인덱스 라우트가 없으면 아무것도 렌더링 하지 않는다.

 

 

라우팅 설정 예시 (App.js):

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

export default App;

Home 컴포넌트 예시 (Home.js):

import React from 'react';
import { Link, Outlet } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <nav>
        <ul>
          <li>
            <Link to="about">About</Link>
          </li>
        </ul>
      </nav>
      <Outlet />
    </div>
  );
}

export default Home;

About 컴포넌트 예시 (About.js):

import React from 'react';

function About() {
  return (
    <div>
      <h2>About Us</h2>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;

위의 코드에서 <Outlet>은 Home 컴포넌트 내에서 중첩된 라우트의 내용을 표시한다.

About 컴포넌트가 Home 컴포넌트 내의 <Outlet> 영역에 표시되어,

/about 경로로 접속할 때 About 컴포넌트의 내용이 Home 컴포넌트에 렌더링된다.

 

 

 

 

 

 

useParams (Path variable)

URL의 동적 파라미터 값을 가져와 동적 라우팅을 구현할 때 매우 유용하며 URL의 파라미터 값을 컴포넌트 내에서 사용할 수 있게 해준다.

 

라우팅 설정 예시 (App.js):

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/user/:username">
          <UserProfile />
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

위의 예시에서 /user/:username 경로로 들어오는 URL에 username 파라미터가 있을 경우,

UserProfile 컴포넌트에서 useParams를 사용하여 해당 파라미터 값을 가져온다.

UserProfile 컴포넌트 예시 (UserProfile.js):

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

function UserProfile() {
  const { username } = useParams();

  return (
    <div>
      <h1>User Profile</h1>
      <p>Username: {username}</p>
    </div>
  );
}

export default UserProfile;

 

useSearchParams(Query String)

재 URL의 쿼리 파라미터를 가져오고 조작하는 데 사용되며 URL의 쿼리 스트링을 다루는 경우에 유용

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

function SearchResults() {
  const [searchParams] = useSearchParams();

  // URL에서 'id' 쿼리 파라미터 값 가져오기
  const query = searchParams.get('id');

  return (
    <div>
      <h1>Search Results</h1>
      <p>Search ID: {id}</p>
    </div>
  );
}

export default SearchResults;

위의 예시에서 SearchResults 컴포넌트에서 useSearchParams를 사용하여 현재 URL의 쿼리 파라미터를 가져온다.

searchParams 객체를 통해 URL의 쿼리 파라미터를 읽을 수 있으며, get 메서드를 사용하여 특정 파라미터의 값을 가져올 수 있다.

 

useNavigate. (Page Moving)

프로그래밍적으로 라우터를 조작할 때 사용되며 라우팅을 처리하고 컴포넌트 간의 전환을 실행할 수 있다.

 

라우팅 설정 예시 (App.js):

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Home 컴포넌트 예시 (Home.js):

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

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

  const handleNavigateAbout = () => {
    navigate('/about');
  };

  return (
    <div>
      <h1>Home</h1>
      <button onClick={handleNavigateAbout}>Go to About</button>
    </div>
  );
}

export default Home;

handleNavigateAbout 함수 내에서 navigate를 호출하여 /about 경로로 이동한다.

 

 

 

 

 

useLocation

현재 페이지의 URL 정보를 가져오는 데 사용하며 URL의 경로, 쿼리 파라미터 등의 정보를 효과적으로 추출할 수 있다.

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

function CurrentLocation() {
  const location = useLocation();

  return (
    <div>
      <h1>Current Location</h1>
      <p>Pathname: {location.pathname}</p>
      <p>Search: {location.search}</p>
    </div>
  );
}

export default CurrentLocation;

위의 코드에서 useLocation을 사용하여 현재 페이지의 URL 정보를 가져온다.

location 객체를 통해 pathname과 search와 같은 정보를 추출하고 활용할 수 있다.

 

search: 쿼리 파라미터 정보가 포함된 문자열이다.

URL에 ?로 시작하는 파라미터를 나타내며, 여러 개의 파라미터가 있는 경우 &로 구분된다.

예를 들어, ?param1=value1&param2=value2와 같은 형태의 쿼리 파라미터가 search로 추출된다

 

예를 들어, URL이 http://example.com/about?id=123&name=John인 경우:

 

pathname은 /about가 되며 search는 ?id=123&name=John가 된다.

 

 

 

useRoutes

 

<Routes>와 기능적으로 동일하지만 <Route> 요소 대신 Javascript객체를 사용하여 경로를 정의하나다.

이러한 객체는 일반 <Route> 요소와 동일한 속성을 갖지만 JSX가 필요하지 않다.

import * as React from "react";
import { useRoutes } from "react-router-dom";

function App() {
  let element = useRoutes ( [
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
         path: "messages", 
         element:<DashboardMessages />
        },
        { path: "tasks", element: «DashboardTasks /> 
       ]
    },
    { path: "team", element: <AboutPage /> }
    ]};
return element;
}