[ React ] 06. router 라우터

React

[ React ] 06. router 라우터

변쌤(이젠강남) 2024. 5. 22. 14:34

router 라우터

라우터란

https://ko.wikipedia.org/wiki/%EB%9D%BC%EC%9A%B0%ED%8C%85

라우팅 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 라우팅(영어: routing)은 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 최적의 경로는 주어진 데이터를 가장 짧은 거리로 또는

ko.wikipedia.org

yarn add react-router-dom

https://reactrouter.com/en/main

Home v6.23.1 | React Router

reactrouter.com

SPA(Single Page Application) 싱글페이지라고 부르는 이유는 유저가 처음 접속했을때 구체적인 data를 제외한 정적파일을 모두 불러오기 때문

리액트 라우터로 페이지를 나누어 유저가 접속하는 url마다 다른 data를 보여줄 수 할수 있음

페이지의 로딩 없이, 페이지에 필요한 컴포넌트를 불러와 렌더링 하여 보여주도록 도와줌

새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태

CSR(Client Side Rendering)

최초 한 번 HTML, static, js 등을 다 받아와서 로딩하는 방식

이후에는 클라이언트의 요청이 있을 때마다 리소스를 서버에서 제공하고 클라이언트가 해석 후 렌더링

클라이언트 요청=> 변화가 필요한 영역만 서버에 전달=> 서버에서 클라이언트로 리소스 전달=> 클라이언트에서 view 처리

SPA(Single Page App) 형식의 프론트엔드 라이브러리(React, Vue)의 방식

(React SSR 라이브러리=Next.js, Vue SSR 라이브러리=Nuxt.js)

처음에 HTML에 대한 정보 비어 있음

출처 : https://d2.naver.com/helloworld/7804182

기능과 개념

라우트(Route):
- 특정 경로와 렌더링할 컴포넌트를 매핑합니다.
- 예: <Route path="/about" element={<About />} />는 /about 경로에 대해 About 컴포넌트를 렌더링합니다.
라우터(Router):
- 애플리케이션의 라우팅을 설정하는 최상위 컴포넌트입니다.
- BrowserRouter, HashRouter 등이 있으며, URL 히스토리 관리 방식에 따라 선택할 수 있습니다.
- 예: <BrowserRouter><App /></BrowserRouter>

링크(Link):
- 사용자가 클릭하면 특정 경로로 이동할 수 있는 링크를 생성합니다.
- 예: <Link to="/home">Home</Link>

동적 라우트(Dynamic Route):
- 경로에 동적 세그먼트를 포함하여 다양한 값에 따라 다른 컴포넌트를 렌더링합니다.
- 예: <Route path="/users/:userId" element={<User />} />

훅(Hook):

useNavigate: 프로그래밍 방식으로 경로를 변경할 수 있습니다.
useParams: 현재 경로의 URL 파라미터를 접근할 수 있습니다.

중첩 라우트(Nested Route):

부모 라우트 내에 자식 라우트를 정의하여, 계층 구조의 라우팅을 구현할 수 있습니다.
<Outlet>을 사용하여 자식 라우트가 렌더링될 위치를 지정합니다.

예)

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="settings" element={<Settings />} />
  <Route path="profile" element={<Profile />} />
</Route>

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

기본형식

import { BrowserRouter as Router, Route, Routes } 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;

<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>

Link 컴포넌트 임포트: import { Link } from 'react-router-dom';
- react-router-dom 패키지에서 Link 컴포넌트를 임포트해야 사용 가능합니다.
Link 컴포넌트: <Link to="/home">Home</Link>
- Link 컴포넌트는 기본적으로 HTML의 <a> 태그와 유사하지만, 클라이언트 사이드 라우팅을 사용합니다.
- to 속성은 이동할 경로를 지정합니다. 여기서는 /home 경로입니다.
- Link 컴포넌트의 여는 태그와 닫는 태그 사이에 있는 텍스트인 Home은 화면에 표시되는 클릭 가능한 텍스트입니다.

클라이언트 사이드 네비게이션:
- 전통적인 <a href="/home">Home</a> 태그는 페이지 전체를 새로 고침하지만, React Router의 <Link> 컴포넌트는 전체 페이지를 새로 고침하지 않고 URL을 변경합니다.
- 이로 인해 페이지가 더 부드럽고 빠르게 전환됩니다. 페이지 전체를 새로 고침하지 않고 필요한 부분만 업데이트하기 때문입니다.
라우트 처리:
- Link를 클릭하면 React Router가 to 경로와 애플리케이션에 정의된 경로를 매칭하여 해당 경로에 맞는 컴포넌트를 렌더링합니다.
- 예를 들어, <Route path="/home" component={HomeComponent} />와 같은 경로가 정의되어 있다면, Link를 클릭했을 때 /home 경로로 이동하고 HomeComponent를 렌더링합니다.

<Routes>
    <Route index element={<Home />} />
    <Route path="about" element={<About />} />
    <Route path="*" element={<NoMatch />} />
</Routes>

Route 컴포넌트: <Route path="home" element={<Home />} />
- path 속성은 URL 경로를 정의합니다. 여기서는 home 경로입니다.
- element 속성은 해당 경로가 활성화될 때 렌더링할 React 컴포넌트를 정의합니다. 여기서는 <Home /> 컴포넌트를 렌더링합니다.

라우트 설정:
- Router 컴포넌트는 전체 애플리케이션을 라우팅 가능한 환경으로 만듭니다.
- Routes 컴포넌트는 여러 개의 Route를 포함할 수 있으며, 현재 URL과 일치하는 첫 번째 Route를 렌더링합니다.
경로와 컴포넌트 매핑:
- 사용자가 /home 경로로 이동하면 React Router는 <Route path="home" element={<Home />} />와 일치하는지를 확인합니다.
- 경로가 일치하면 element 속성에 정의된 <Home /> 컴포넌트를 렌더링합니다.

사용자가 브라우저에서 /home 경로로 이동합니다.
Routes 컴포넌트는 자식 Route 컴포넌트들 중 path="home"과 일치하는 Route를 찾습니다.
일치하는 경로를 찾으면 element={<Home />} 속성에 정의된 Home 컴포넌트를 렌더링합니다.

Router: 애플리케이션을 라우팅 가능한 환경으로 만듭니다.
Routes: 여러 Route를 포함하여 현재 URL과 일치하는 경로를 렌더링합니다.
Route: path와 element 속성을 사용하여 URL 경로와 렌더링할 컴포넌트를 정의합니다.

링크

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


<nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
</nav>

useParams

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

function Team() {
  const { teamId } = useParams();
  
  return (
    <div>
      <h1>Team ID: {teamId}</h1>
      {/* teamId를 사용하여 팀 데이터를 가져오거나 표시 */}
    </div>
  );
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/teams/:teamId" element={<Team />} />
      </Routes>
    </Router>
  );
}

export default App;

useParams 임포트: import { useParams } from 'react-router-dom';
- useParams 은 React Router Dom 패키지에서 가져옵니다.
URL 파라미터 추출: const { teamId } = useParams();
- useParams를 호출하면 현재 경로의 URL 파라미터를 포함한 객체를 반환합니다.
- 객체의 키는 동적 경로 세그먼트의 이름(여기서는 teamId)이고, 값은 URL에서 추출된 값입니다.
파라미터 값 사용:
- 추출한 teamId 값을 컴포넌트 내부에서 사용하여 특정 데이터를 가져오거나 표시할 수 있습니다.

동적 경로 설정: <Route path="/teams/:teamId" element={<Team />} />
- :teamId는 동적 세그먼트로, 다양한 값과 매칭될 수 있습니다. 예를 들어, /teams/1, /teams/2 등.
경로 매칭: 사용자가 /teams/1로 이동하면 React Router는 /teams/:teamId 경로와 매칭시킵니다.
파라미터 접근: useParams를 호출하면 현재 경로에서 추출된 teamId 값을 사용할 수 있습니다. 예를 들어, /teams/1로 이동했을 때 teamId는 1이 됩니다.

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function Team() {
  const { teamId } = useParams();
  const [teamData, setTeamData] = useState(null);

  useEffect(() => {
    // API 호출을 통해 팀 데이터를 가져옴
    fetch(`https://api.example.com/teams/${teamId}`)
      .then(response => response.json())
      .then(data => setTeamData(data));
  }, [teamId]);

  if (!teamData) return <div>Loading...</div>;

  return (
    <div>
      <h1>{teamData.name}</h1>
      <p>{teamData.description}</p>
    </div>
  );
}

index

<Route index element={<Home />} />

<Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          {/* 다른 라우트들 */}
    </Route>
  </Routes>

Route 컴포넌트: <Route index element={<Home />} />
- index 속성은 현재 경로의 기본 라우트를 정의합니다. 기본 라우트는 부모 경로가 매칭될 때 자동으로 렌더링됩니다.
- element 속성은 index 라우트가 활성화될 때 렌더링할 컴포넌트를 지정합니다. 여기서는 <Home /> 컴포넌트를 렌더링합니다.

라우트 설정:
- Router 컴포넌트는 애플리케이션을 라우팅 가능한 환경으로 만듭니다.
- Routes 컴포넌트는 여러 Route를 포함하여 현재 URL과 일치하는 경로를 렌더링합니다.
- Route path="/" element={<Layout />}는 / 경로에 대해 레이아웃 컴포넌트를 렌더링합니다.
인덱스 라우트:
- <Route index element={<Home />} />는 path="/" 경로의 기본 라우트를 정의합니다.
- 사용자가 정확히 / 경로로 이동하면, index 라우트에 설정된 <Home /> 컴포넌트가 렌더링됩니다.

사용자가 브라우저에서 / 경로로 이동합니다.
Routes 컴포넌트는 자식 Route 컴포넌트들 중 path="/"와 일치하는 경로를 찾습니다.
path="/" 경로에 대한 기본(인덱스) 라우트인 <Route index element={<Home />} />를 확인합니다.
기본 라우트가 일치하므로 element={<Home />} 속성에 정의된 Home 컴포넌트를 렌더링합니다.

요약

Router: 애플리케이션을 라우팅 가능한 환경으로 만듭니다.
Routes: 여러 Route를 포함하여 현재 URL과 일치하는 경로를 렌더링합니다.
Route: 특정 경로와 컴포넌트를 매핑합니다.
Index Route: 부모 경로가 매칭될 때 기본으로 렌더링될 컴포넌트를 설정합니다.

Layout ,

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Layout from './Layout'; // Layout 컴포넌트를 임포트
import Home from './Home'; // Home 컴포넌트를 임포트
import About from './About'; // About 컴포넌트를 임포트

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          {/* 다른 자식 라우트들 */}
        </Route>
      </Routes>
    </Router>
  );
}

Layout 컴포넌트: <Route path="/" element={<Layout />}>
- path="/"는 루트 경로를 의미합니다.
- element={<Layout />}는 루트 경로에 대해 Layout 컴포넌트를 렌더링합니다.
- <Layout /> 컴포넌트는 이 경로에 공통으로 표시될 레이아웃을 정의합니다.
자식 라우트: <Route path="/" element={<Layout />}> 내에 정의된 라우트들
- index 라우트는 / 경로에 대해 기본적으로 렌더링될 컴포넌트를 정의합니다.
- 다른 자식 라우트들 (about 경로 등)은 Layout 컴포넌트 내에서 렌더링됩니다.

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

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          {/* 다른 네비게이션 링크들 */}
        </ul>
      </nav>
      <main>
        <Outlet /> {/* 자식 라우트들이 렌더링되는 곳 */}
      </main>
      <footer>
        <p>Footer content</p>
      </footer>
    </div>
  );
}

export default Layout;

useNavigate()

useNavigate는 React Router v6에서 제공하는 훅(hook)으로, 프로그래밍 방식으로 경로를 변경하거나 탐색할 수 있도록 해줍니다.

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

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

  const handleButtonClick = () => {
    navigate('/home');
  };

  return (
    <button onClick={handleButtonClick}>
      Go to Home
    </button>
  );
}

Importing useNavigate: import { useNavigate } from 'react-router-dom';
- useNavigate 훅을 React Router Dom 패키지에서 임포트합니다.
Initializing useNavigate: const navigate = useNavigate();
- useNavigate를 호출하여 navigate 함수를 얻습니다. 이 함수는 프로그래밍 방식으로 경로를 변경하는 데 사용됩니다.
Using navigate: navigate('/home');
- navigate 함수는 인자로 전달된 경로로 애플리케이션을 이동시킵니다. 이 예제에서는 /home 경로로 이동합니다.
- navigate 함수는 주로 이벤트 핸들러(예: 버튼 클릭) 내부에서 호출됩니다.

navigate('/about'); 해당페이지이동
navigate(-1); 뒤로 이동
navigate(1);  앞으로 이동

Outlet

<Outlet>은 React Router에서 중첩된 라우트를 렌더링하기 위해 사용되는 컴포넌트입니다. 중첩된 라우트는 특정 경로의 자식 경로로 정의된 라우트들을 말하며, <Outlet>은 부모 컴포넌트 내에서 이러한 자식 컴포넌트들이 렌더링될 위치를 지정합니다.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Layout from './Layout'; // Layout 컴포넌트를 임포트
import Home from './Home'; // Home 컴포넌트를 임포트
import About from './About'; // About 컴포넌트를 임포트
import Team from './Team'; // Team 컴포넌트를 임포트

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="teams/:teamId" element={<Team />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

Layout

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

function Layout() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/teams/1">Team 1</Link>
          </li>
          {/* 다른 네비게이션 링크들 */}
        </ul>
      </nav>
      <main>
        <Outlet /> {/* 자식 라우트들이 렌더링되는 곳 */}
      </main>
    </div>
  );
}

export default Layout;

Routes 설정:
- Routes 컴포넌트는 여러 Route를 포함하여 현재 URL과 일치하는 경로를 렌더링합니다.
- <Route path="/" element={<Layout />}>는 / 경로에 대해 Layout 컴포넌트를 렌더링하며, 이 경로에 중첩된 자식 경로들을 정의할 수 있습니다.
Layout 컴포넌트:
- Layout 컴포넌트는 네비게이션 링크와 <Outlet />을 포함합니다.
- <Outlet />은 현재 경로의 자식 컴포넌트가 렌더링될 위치를 지정합니다.
자식 라우트 정의:
- index 라우트는 / 경로에 대해 기본적으로 렌더링될 컴포넌트를 정의합니다. 여기서는 Home 컴포넌트를 렌더링합니다.
- /about 경로는 About 컴포넌트를 렌더링합니다.
- /teams/:teamId 경로는 동적 세그먼트를 포함하며, Team 컴포넌트를 렌더링합니다.

경로 탐색:
- 사용자가 /about 경로로 이동하면, Routes 컴포넌트는 /about 경로와 일치하는 자식 Route를 찾습니다.
- Layout 컴포넌트가 렌더링된 상태에서, <Outlet /> 위치에 About 컴포넌트가 렌더링됩니다.
중첩 라우트 렌더링:
- 사용자가 /teams/1 경로로 이동하면, Routes 컴포넌트는 /teams/:teamId 경로와 일치하는 자식 Route를 찾습니다.
- Layout 컴포넌트가 렌더링된 상태에서, <Outlet /> 위치에 Team 컴포넌트가 렌더링됩니다. Team 컴포넌트는 useParams 훅을 사용하여 teamId 값을 추출할 수 있습니다.

<Outlet> 컴포넌트: 중첩된 자식 라우트가 렌더링될 위치를 지정합니다.
중첩 라우트: 부모 경로 내에 정의된 자식 경로들을 나타내며, Routes와 Route를 통해 정의됩니다.
동적 경로: :paramName 형태로 동적 세그먼트를 정의하여, 경로에 따라 동적인 값을 사용할 수 있습니다.

# useSearchParams

URL의 쿼리 스트링을 쉽게 읽고 수정할 수 있게 도와주는 훅입니다. useSearchParams를 사용하면 URL 쿼리 파라미터를 상태처럼 관리할 수 있으며, URL을 직접 조작하지 않고도 쿼리 스트링을 쉽게 추가, 수정, 삭제할 수 있습니다.

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

function MyComponent() {
  const [searchParams, setSearchParams] = useSearchParams();

  // 특정 파라미터를 읽기
  const paramValue = searchParams.get('paramName'); // 'paramName'의 값을 가져옴

  // 파라미터 설정 (URL 쿼리 스트링 수정)
  const handleUpdate = () => {
    setSearchParams({ paramName: 'newValue' }); // URL에 ?paramName=newValue 추가
  };

  return (
    <div>
      <p>Current Param Value: {paramValue}</p>
      <button onClick={handleUpdate}>Update Param</button>
    </div>
  );
}

searchParams.get(key): 쿼리 파라미터 값을 가져옵니다.
searchParams.has(key): 해당 파라미터가 존재하는지 확인합니다.
searchParams.set(key, value): 해당 파라미터 값을 설정합니다.
searchParams.append(key, value): 새로운 파라미터를 추가합니다.
searchParams.delete(key): 해당 파라미터를 삭제합니다.
setSearchParams: 쿼리 파라미터를 한꺼번에 설정하거나 업데이트합니다.

URL에서 key=명령어와 같은 형태는 **쿼리 스트링(Query String)**으로, 주로 웹 브라우저가 서버로 특정 정보를 전달할 때 사용됩니다. 여기서 key는 변수 이름이고, 명령어는 그 변수에 전달되는 값입니다.

key: 이 부분은 서버에 전달할 정보의 이름 또는 파라미터입니다. 즉, 서버가 해석할 특정 데이터나 검색어의 이름을 지정하는 역할을 합니다. 이 경우, key는 "검색 키워드"와 같은 의미로 사용될 가능성이 큽니다. key는 URL 쿼리에서 파라미터의 이름을 나타내는 역할
: 이 부분은 실제로 전달하려는 값입니다. 여기서는 명령어가 값이므로, 이 값이 서버로 전달되어 해당 값과 관련된 검색 결과나 동작을 서버가 처리하게 됩니다.

search.html?key=명령어: 서버는 key라는 파라미터를 받아 그 값으로 명령어를 처리하게 됩니다. 웹사이트는 이를 통해 해당 검색어에 대한 검색 결과를 반환하거나, 특정 동작을 수행할 수 있습니다.

# useLocation

<Route> 컴포넌트의 path명을 가져오려면 주로 useLocation 훅을 사용합니다. useLocation 훅을 사용하면 현재 URL의 경로를 포함한 위치 객체를 얻을 수 있습니다.

App

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

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

export default App;

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

function ShowPath() {
  const location = useLocation();
  const currentPath = location.pathname;

  return (
    <div>
      <p>Current Path: {currentPath}</p>
    </div>
  );
}

export default ShowPath;

useLocation 훅: React Router v6에서 제공하는 훅으로, 현재 위치 객체를 반환합니다. 이 객체는 pathname을 포함하여 현재 URL에 대한 정보를 담고 있습니다.
location.pathname: 현재 경로를 나타내는 문자열로, 이를 사용하여 현재 경로를 확인할 수 있습니다.

/경로의 / 제거하는 방법

  const location = useLocation();
  const currentPath = location.pathname;
  const cleanedPath = currentPath.replace('/', ''); // '/'를 ''로 대체

location.pathname을 가져와 replace 메서드를 사용하여 경로에서 /를 제거합니다.

const location = useLocation();
const currentPath = location.pathname;
const cleanedPath = currentPath.replace(/\//g, ''); // 모든 '/'를 ''로 대체

정규 표현식 /\//g를 사용하여 문자열 내 모든 슬래시를 빈 문자열로 대체합니다.

 const cleanedPath = currentPath.replace(/^\//, ''); // 맨 앞의 '/'만 제거

'React' 카테고리의 다른 글

[ React ] react-datepicker, dateFormat (0)	2024.05.26
[ React ] 07. 상태관리 - context , redux (0)	2024.05.23
[ React ] 05. style , 스타일 (0)	2024.05.20
[ React ] 04. useEffect, useLayoutEffect, useReducer , useMemo, useCallback (0)	2024.05.15
[ React ] 03. useRef (0)	2024.05.09

현재글[ React ] 06. router 라우터

fullstack-study

fullstack 수업진행에 필요한 참고 자료 입니다. ( 보조교재 ) ** 백문이 불여일타! **

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

fullstack-study