Router

React 애플리케이션의 URL을 관리하는 라이브러리

정의

React 라우터는 React 애플리케이션 내에서 페이지 간의 네비게이션을 관리하는 라이브러리입니다. 주로 싱글 페이지 애플리케이션(Single Page Application, SPA)에서 사용되며, URL을 기반으로 다양한 컴포넌트를 렌더링하여 사용자 경험을 향상시킵니다.

Router 를 사용하면 URL을 기반으로 애플리케이션의 렌더링을 제어할 수 있습니다.

사용목적

React 라우터를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

•

애플리케이션의 각 페이지에 대한 URL을 정의합니다.

•

사용자가 URL을 변경할 때 애플리케이션의 렌더링을 업데이트합니다.

•

애플리케이션의 각 페이지에 대한 액세스를 제어합니다.

일반적인 페이지 이동과 라우팅의 차이

특징	일반적인 페이지 이동	라우팅
HTTP 요청	새 페이지의 HTML, CSS, JavaScript 파일을 다운로드	기존 페이지의 DOM을 업데이트
브라우저의 렌더링	브라우저의 DOM을 완전히 새로 렌더링	기존 페이지의 DOM을 업데이트
장점	기존 웹 개발 방식과의 호환성	브라우저의 리소스를 절약하고 로딩 속도를 개선할 수 있습니다.
단점	새로운 페이지를 완전히 새로 로드해야 하는 경우, 리소스를 많이 소모할 수 있습니다.	라우팅을 구현하기 위한 라이브러리 또는 프레임워크가 필요합니다.

일반적인 페이지 이동

일반적인 페이지 이동은 브라우저에서 HTTP 요청을 통해 새로운 페이지를 로드하는 것을 의미합니다. 이 경우 브라우저는 새 페이지의 HTML, CSS, JavaScript 파일을 다운로드하고, 브라우저의 DOM에 새 페이지를 렌더링합니다.

라우팅

라우팅은 페이지 이동을 보다 효율적으로 처리하기 위한 방법입니다. 라우팅을 사용하면 브라우저가 새로운 페이지를 완전히 로드하는 대신, 기존 페이지의 DOM을 업데이트하여 새로운 페이지를 표시합니다.

설치

React 라우터를 사용하기 위해서는 라이브러리를 설치해야 합니다.

npm install react-router-dom
JavaScript
복사

문법

주요 키워드

v5 (react-router-dom)

키워드	설명
BrowserRouter	브라우저에서 라우팅을 활성화하는 컴포넌트
Route	URL 패턴과 렌더링할 컴포넌트를 정의하는 컴포넌트
Switch	여러 Route 컴포넌트를 그룹화하는 컴포넌트
Link	URL을 링크하는 컴포넌트
to	Link 컴포넌트의 속성으로, 이동할 경로를 지정합니다.
exact	Route 컴포넌트의 속성으로, 경로가 정확히 일치해야만 렌더링됩니다.
param, params	Route 컴포넌트의 속성으로, URL에 매개변수를 추가합니다.
redirect	Route 컴포넌트의 속성으로, 다른 URL로 리디렉션합니다.
component	Route 컴포넌트의 속성으로, 렌더링할 컴포넌트를 지정합니다.

Hooks

키워드	설명
withRouter	라우팅 정보를 사용할 수 있는 Hook
useHistory	브라우저의 URL을 직접 조작할 수 있는 Hook
useLocation	현재 URL을 가져올 수 있는 Hook
useParams	URL에 지정된 매개변수를 가져올 수 있는 Hook

v6 (react-router-dom)

키워드

키워드	설명
BrowserRouter	브라우저의 History API를 사용하여 라우팅을 관리하는 컴포넌트입니다.
HashRouter	브라우저의 URL 해시를 사용하여 라우팅을 관리하는 컴포넌트입니다.
Routes	라우팅 규칙을 정의하는 컴포넌트입니다.
Route	특정 경로에 해당하는 컴포넌트를 렌더링하는 컴포넌트입니다.
Link	특정 경로로 이동하는 링크를 렌더링하는 컴포넌트입니다.
useHistory	History API를 사용할 수 있는 훅입니다.
useNavigate	History API를 사용하여 특정 경로로 이동하는 훅입니다.
useLocation	현재 위치 정보를 가져올 수 있는 훅입니다.
useParams	경로 파라미터를 가져올 수 있는 훅입니다.
useQuery	쿼리 스트링을 가져올 수 있는 훅입니다.

•

v5

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

const Home = () => {
  return (
    <div>
      <h1>홈페이지</h1>
      <Link to="/about">소개</Link>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>소개</h1>
      <Link to="/">홈페이지</Link>
    </div>
  );
};
JavaScript
복사

위 코드에서는 BrowserRouter 컴포넌트를 사용하여 브라우저에서 라우팅을 활성화합니다. Switch 컴포넌트를 사용하여 여러 Route 컴포넌트를 그룹화합니다. Route 컴포넌트는 URL 패턴과 렌더링할 컴포넌트를 정의합니다.

•

v6

import logo from './logo.svg';
import './App.css';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom'

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

// 🔗 /
function Home() {
  return (
    <>
      <h1>Home</h1>
      <Link to="/about">About</Link>
    </>
  )
}

// 🔗 /about
function About() {
  return (
    <>
      <h1>About</h1>
      <Link to="/">Home</Link>
    </>
  )
}

export default App;
JavaScript
복사

BrowserRouter

브라우저에서 라우팅을 활성화하는 컴포넌트

BrowserRouter는 브라우저에서 라우팅을 활성화하는 컴포넌트입니다. BrowserRouter를 사용하면 React 애플리케이션의 URL을 변경할 때 애플리케이션의 렌더링을 업데이트할 수 있습니다.

BrowserRouter는 다음과 같은 속성을 제공합니다.

•

basename: URL의 기본 경로를 지정합니다.

•

history: 브라우저의 URL을 조작하는 데 사용할 수 있는 History 인터페이스를 제공합니다.

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter basename="/my-app">
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

const Home = () => {
  return <h1>홈페이지</h1>;
};

const About = () => {
  return <h1>소개</h1>;
};
JavaScript
복사

http://localhost:3000/my-app/
Plain Text
복사

Route

URL 패턴과 렌더링할 컴포넌트를 정의하는 컴포넌트

Route는 URL 패턴과 렌더링할 컴포넌트를 정의하는 컴포넌트입니다. Route 컴포넌트를 사용하여 React 애플리케이션의 라우팅을 구현할 수 있습니다.

Route 컴포넌트는 다음과 같은 속성을 제공합니다.

•

path: 라우팅할 URL 패턴입니다.

•

exact: 경로가 정확히 일치해야만 렌더링됩니다.

•

params: URL에 매개변수를 추가합니다.

•

redirect: 다른 URL로 리디렉션합니다.

•

component: 렌더링할 컴포넌트를 지정합니다.

기본 예시

<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
JavaScript
복사

params 속성 사용 예시

•

• params 속성을 사용하여 id 매개변수의 값을 지정합니다.

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/boards/:id"
          component={Board}
          params={{ id: 123 }}
        />
      </Switch>
    </BrowserRouter>
  );
}

const Home = () => {
  return <h1>홈페이지</h1>;
};

const Board = () => {
  const { id } = useParams();

  return (
    <div>
      <h2>게시물 조회</h2>
      <p>게시물 ID: {id}</p>
    </div>
  );
};
JavaScript
복사

redirect 속성 사용 예시

• /admin 경로는 로그인하지 않은 사용자에게 로그인 페이지로 리디렉션합니다.

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/admin"
          render={() => {
            if (isLoggedIn) {
              return <Admin />;
            } else {
              return <Redirect to="/login" />;
            }
          }}
        />
        <Route path="/boards/:id" component={Board} />
        <Route path="/boards/:id/delete" redirect="/boards" />
      </Switch>
    </BrowserRouter>
  );
}

const Home = () => {
  return <h1>홈페이지</h1>;
};

const Board = () => {
  const { id } = useParams();

  return (
    <div>
      <h2>게시물 조회</h2>
      <p>게시물 ID: {id}</p>
    </div>
  );
};

const Admin = () => {
  return <h1>관리자 페이지</h1>;
};
JavaScript
복사

정규식 URL 패턴 작성

path 속성의 경로에 매개변수가 포함되는 경우, 정규식으로 패턴 매핑을 할 수 있습니다.

<Route path="/경로/:파라미터[정규식]" component={컴포넌트} />
JavaScript
복사

코드는 /경로 경로에 :파라미터 매개변수가 포함된 경우에만 컴포넌트를 렌더링합니다.

여기서 :파라미터는 정규식이며, 다음과 같은 의미를 갖습니다.

•

:는 매개변수를 의미합니다.

•

파라미터는 매개변수의 이름입니다.

•

[정규식]은 매개변수의 값에 대한 정규식입니다.

이렇게 전달된 :파라미터 는 해당 컴포넌트에서 useParams() 훅으로 가져올 수 있습니다.

const { id } = useParams();
JavaScript
복사

예시

<Route path="/boards/:id" component={Board} />
JavaScript
복사

/boards 경로에 매개변수가 포함된 경우에만 Board 컴포넌트를 렌더링합니다.

여기서 :id는 정규식이며, 다음과 같은 의미를 갖습니다.

•

:는 매개변수를 의미합니다.

•

id는 매개변수의 이름입니다.

/boards/:id 경로는 다음과 같은 URL과 일치합니다.

•

/boards/123

•

/boards/abc

•

/boards/hello

:id 정규식은 다음과 같이 다른 값으로 변경할 수도 있습니다.

•

:id([0-9]+)는 숫자만 포함된 매개변수를 의미합니다.

•

:id([a-z]+)는 문자만 포함된 매개변수를 의미합니다.

•

:id([a-z0-9]+)는 문자와 숫자를 모두 포함할 수 있는 매개변수를 의미합니다.

<Route path="/boards/:id([0-9]+)" component={Board} />
JavaScript
복사

위 코드는 /boards 경로에 숫자만 포함된 매개변수가 포함된 경우에만 Board 컴포넌트를 렌더링합니다.

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
 return (
  <BrowserRouter>
   <Switch>
    <Route path="/" exact component={Home} />
    <Route path="/users/:id)" component={User} />
    <Route path="/boards/:id" component={Board} />
   </Switch>
  </BrowserRouter>
 );
}

const Home = () => {
 return <h1>홈페이지</h1>;
};

const User = () => {
 const { id } = useParams();

 return (
  <h1>사용자 ID: {id}</h1>
 );
};

const Board = () => {
 const { id } = useParams();

 return (
  <h1>게시물 ID: {id}</h1>
 );
};
JavaScript
복사

Routes (v.6)

자식 Route 컴포넌트 중 하나만 렌더링하는 컴포넌트

Routes 컴포넌트의 자식 Route 컴포넌트 중 URL과 일치하는 Route 컴포넌트만 렌더링됩니다.

<Routes>
  <Route path="/"  element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>
JavaScript
복사

Switch (v.5)

자식 Route 컴포넌트 중 하나만 렌더링하는 컴포넌트

Switch 컴포넌트의 자식 Route 컴포넌트 중 URL과 일치하는 Route 컴포넌트만 렌더링됩니다.

<Switch>
  <Route path="/" exact component={Home} />
  <Route path="/about" component={About} />
</Switch>
JavaScript
복사

역할

Switch를 사용하지 않고 Route 여러 개를 사용하여 라우팅을 구현하는 경우, URL이 일치하는 모든 Route 컴포넌트가 렌더링됩니다. 예를 들어, 다음과 같은 코드는 / 경로와 /about 경로에 해당하는 Route 컴포넌트를 모두 렌더링합니다.

•

<Switch> 컴포넌트를 사용한 경우

import React, { useState } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

const Home = () => {
  return <h1>홈페이지</h1>;
};

const About = () => {
  return <h1>소개</h1>;
};
JavaScript
복사

•

URL : /

Plain Text
복사

•

URL : /about

Plain Text
복사

•

<Switch> 컴포넌트를 사용하지 않은 경우

import React, { useState } from "react";
import { BrowserRouter, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </BrowserRouter>
  );
}

const Home = () => {
  return <h1>홈페이지</h1>;
};

const About = () => {
  return <h1>소개</h1>;
};
JavaScript
복사

•

URL : /

Plain Text
복사

•

URL : /about

Plain Text
복사

Router

Router

정의

사용목적

일반적인 페이지 이동과 라우팅의 차이

일반적인 페이지 이동

라우팅

설치

문법

주요 키워드

Hooks

키워드

BrowserRouter

Route

기본 예시

params 속성 사용 예시

redirect 속성 사용 예시

정규식 URL 패턴 작성

예시

Routes (v.6)

Switch (v.5)

역할

실습코드

“게시판 프로젝트”