[내일배움캠프] Node.js 4기 TIL | Day 03 | 23.12.31.(일)

리액트 페이지 라우팅 완전 정복

리액트 페이지 라우팅은 리액트 애플리케이션에서 사용자가 URL을 통해 페이지에 접근할 때 해당 URL에 따라 서로 다른 컴포넌트를 보여주는 기능입니다. 리액트 애플리케이션을 개발할 때 페이지 라우팅은 필수적인 기능으로, 사용자에게 직관적이고 편리한 사용 경험을 제공할 수 있습니다.

이 글에서는 리액트 페이지 라우팅의 기본 개념부터 고급 기능까지 미친 디테일로 살펴보겠습니다.

1. 페이지 라우팅의 개념
페이지 라우팅은 크게 두 가지로 나눌 수 있습니다.

서버 사이드 라우팅
클라이언트 사이드 라우팅
서버 사이드 라우팅은 서버에서 URL을 분석하여 해당하는 페이지를 응답하는 방식입니다. 기존의 웹 애플리케이션에서 주로 사용되는 방식입니다.

클라이언트 사이드 라우팅은 클라이언트에서 URL을 분석하여 해당하는 페이지를 렌더링하는 방식입니다. 리액트 애플리케이션에서 주로 사용되는 방식입니다.

리액트 페이지 라우팅은 클라이언트 사이드 라우팅을 지원합니다. 클라이언트 사이드 라우팅은 서버 사이드 라우팅에 비해 다음과 같은 장점이 있습니다.

빠른 응답 속도
동적 라우팅이 용이
SPA(Single Page Application) 구현이 용이
2. 리액트 라우터 설치 및 사용
리액트 페이지 라우팅을 사용하기 위해서는 react-router-dom 패키지를 설치해야 합니다.

npm install react-router-dom

 

패키지를 설치한 후, 다음과 같이 App 컴포넌트에 BrowserRouter 컴포넌트를 추가합니다.

 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div>
        <h1>리액트 페이지 라우팅</h1>
      </div>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

 

BrowserRouter 컴포넌트는 브라우저의 History API를 사용해 현재 위치의 URL을 저장하고 관리하는 역할을 합니다.

3. 기본 라우팅
기본 라우팅은 Route 컴포넌트를 사용하여 구현합니다.

 

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

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

function Home() {
  return (
    <div>
      <h1>홈</h1>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

 

위 코드에서는 Route 컴포넌트를 사용하여 / 경로에 Home 컴포넌트를 매칭합니다. 따라서 브라우저 주소창에 http://localhost:3000/을 입력하면 Home 컴포넌트가 렌더링됩니다.

4. 동적 라우팅
동적 라우팅은 URL에 매개변수를 사용하여 구현합니다.

JavaScript

 

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:id" component={User} />
      </Routes>
    </BrowserRouter>
  );
}

function User({ id }) {
  return (
    <div>
      <h1>사용자 {id}</h1>
    </div>

 

* From Bard.