[React] 페이지 라우팅 (Routing)

 

웹 개발을 하다 보면 페이지 이동이 필요할 때가 많습니다. React에서도 이런 페이지 이동을 구현할 수 있는데요, 이를 "라우팅(Routing)"이라고 합니다.

이번 글에서는 라우팅이 무엇인지, 그리고 React에서 어떻게 라우팅을 설정하는지 쉽게 설명해 드릴게요!

---

01

페이지 라우팅이란?

라우팅은 사용자가 특정 URL(경로)로 이동하면, 해당하는 페이지를 화면에 보여주는 것을 의미합니다. 

예를 들어, /home 경로를 입력하면 홈페이지가, /about 경로를 입력하면 소개 페이지가 보이는 식이죠.

1. MPA (Multi Page Application) 방식

전통적인 웹사이트는 MPA 방식으로 동작합니다. 즉, 서버가 여러 개의 HTML 파일을 미리 가지고 있으며, 사용자가 특정 페이지를 요청하면 서버가 해당 HTML 파일을 응답해 주는 방식이에요.

 

이 방식은 직관적이지만, 페이지 이동 시마다 서버에서 새로운 HTML을 불러오기 때문에 속도가 느리고, 서버 부하가 커질 수 있다는 단점이 있습니다. 이런 단점을 해결하기 위해 React는 SPA 방식을 사용합니다.

 

2. SPA (Single Page Application) 방식

React는 SPA 방식을 따릅니다. SPA는 한 개의 HTML 파일만을 사용하며,

페이지 이동이 필요할 때마다 JavaScript가 필요한 부분만 교체하여 빠르게 화면을 갱신하는 방식이에요.

서버에서 새로운 HTML을 불러오지 않기 때문에 속도가 빠르고, 사용자 경험이 부드러워집니다.

 

이러한 방식 때문에 React에서는 "클라이언트 사이드 렌더링(Client Side Rendering, CSR)"이 기본적으로 사용됩니다.

즉, 브라우저에서 직접 렌더링을 처리하는 것이죠.

---

02

React에서 라우팅 설정하기

React에서 라우팅을 설정하려면 react-router-dom 라이브러리를 사용해야 합니다.

1) react-router-dom 설치하기

npm install react-router-dom

설치가 완료되면, 이제 본격적으로 라우팅을 설정해 보겠습니다.

 

2) 기본적인 라우터 설정

라우팅을 사용하려면 BrowserRouter, Routes, Route 컴포넌트를 사용해야 합니다.

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

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

BrowserRouter는 브라우저의 현재 주소를 감지하고 저장하는 역할을 합니다. 

그리고 Routes 안에 Route들을 정의하면, 특정 경로에 맞는 컴포넌트를 렌더링 할 수 있습니다.

• / → Home 컴포넌트 렌더링
• /about → About 컴포넌트 렌더링
• * → 존재하지 않는 페이지 요청 시 NotFound 컴포넌트 렌더링

---

03

페이지 이동하기

페이지 이동을 할 때는 Link 컴포넌트나 useNavigate 훅을 사용할 수 있습니다.

 

Link는 정적인 링크를 만들 때 사용하고, useNavigate는 동적으로 페이지를 이동해야 할 때 유용합니다.

만약 일반적인 <a> 태그를 사용하면 전체 페이지가 새로고침되기 때문에 SPA 방식이 깨지게 됩니다.

1) Link 사용하기

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

function Navbar() {
  return (
    <nav>
      <Link to="/">홈</Link>
      <Link to="/about">소개</Link>
    </nav>
  );
}

이렇게 하면 <a> 태그처럼 보이지만, 실제로는 페이지를 새로고침하지 않고 필요한 부분만 교체하여 빠르게 이동할 수 있습니다.

2) useNavigate 사용하기

라우팅을 코드로 제어하고 싶다면 useNavigate 훅을 사용하면 됩니다.

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

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

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

  return (
    <div>
      <h1>홈페이지</h1>
      <button onClick={goToAbout}>소개 페이지로 이동</button>
    </div>
  );
}

navigate('/about')을 실행하면 about 페이지로 이동하게 됩니다.

Link 대신 동적인 이동이 필요할 때 유용하게 사용할 수 있습니다.

---

04

동적 경로 (URL Parameters & Query String)

가끔은 특정 데이터를 포함한 경로를 사용해야 할 때가 있습니다.

예를 들어, 블로그 게시글의 ID를 URL에 포함시켜야 할 경우가 있겠죠?

 

이런 동적 경로는 크게 두 가지 방식으로 나뉩니다.

1. URL 파라미터
   : 특정 항목을 식별하는 고유한 값(예: 게시글 ID, 사용자 ID 등)을 경로에 직접 포함하는 방식입니다.
   예를 들어, /post/1 같은 경로에서 1이 ID 값이 됩니다. 보통 변경되지 않는 값을 사용할 때 적합합니다.
2. 쿼리 스트링
   : 검색어와 같이 자주 변경되는 데이터를 URL에 포함하는 방식입니다.
   예를 들어, /search? q=React에서 q=React 부분이 쿼리 스트링이며, 검색어를 동적으로 변경할 수 있습니다.

1) URL 파라미터 사용하기

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

function Post() {
  const { id } = useParams();
  return <h1>게시글 ID: {id}</h1>;
}

이제 라우트를 설정할 때 동적 값을 받을 수 있도록 해야 합니다.

 

<Route path="/post/:id" element={<Post />} />

이렇게 하면 /post/1, /post/2 등의 URL에서 id 값을 가져올 수 있습니다.

 

2) 쿼리 스트링 사용하기

쿼리 스트링을 사용하면 검색어와 같은 데이터를 전달할 수 있습니다.

useSearchParams 훅을 사용하면 두 가지 방식으로 값을 가져올 수 있습니다.

1. searchParams.get('q')처럼 특정 키 값을 직접 가져오는 방식
2. [searchParams, setSearchParams]처럼 useState처럼 값을 관리하고 업데이트하는 방식

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

function Search() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q');
  return <h1>검색어: {query}</h1>;
}

그리고 라우트를 설정해 줍니다.

 

만약 useState처럼 값을 관리하고 업데이트하고 싶다면 다음과 같이 사용할 수 있습니다.

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

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const [query, setQuery] = useState(searchParams.get('q') || "");

  const handleSearchChange = (e) => {
    setQuery(e.target.value);
  };

  const handleSearchSubmit = () => {
    setSearchParams({ q: query }); // 쿼리 스트링에 'q' 값 업데이트
  };

  return (
    <div>
      <h1>검색</h1>
      <input
        type="text"
        value={query}
        onChange={handleSearchChange}
        placeholder="검색어를 입력하세요"
      />
      <button onClick={handleSearchSubmit}>검색</button>
      <h2>검색어: {searchParams.get('q')}</h2> {/* 쿼리 스트링에서 검색어 출력 */}
    </div>
  );
}

export default Search;

이렇게 하면 버튼을 클릭할 때마다 검색어 값을 업데이트할 수 있습니다.

 

<Route path="/search" element={<Search />} />

이제 /search? q=React/search? q=React와 같은 URL로 접근하면 q 값이 React로 전달됩니다.

---

05

마무리

React에서 라우팅을 설정하는 방법을 정리해 봤는데요! 정리하면 다음과 같습니다.

1. react-router-dom을 설치한다.
2. BrowserRouter, Routes, Route를 사용해 기본적인 라우팅을 설정한다.
3. Link나 useNavigate를 이용해 페이지를 이동한다.
4. 동적 경로(useParams)와 쿼리 스트링(useSearchParams)을 활용할 수 있다.

이제 React에서 페이지 이동이 어떻게 이루어지는지 이해하셨겠죠?

라우팅을 잘 활용하면 더욱 깔끔하고 빠른 웹 애플리케이션을 만들 수 있습니다!