[React] React 라우팅

React 라우팅은 React 애플리케이션 내에서 다른 페이지 간의 전환을 관리하는 기술입니다. 싱글 페이지 애플리케이션(Single Page Application, SPA)에서 여러 페이지를 표현하고 URL에 따라 컴포넌트를 동적으로 렌더링하여 사용자 경험을 향상시킵니다. React에서는 React Router 라이브러리를 통해 라우팅을 구현할 수 있습니다. 아래에서 React 라우팅에 대해 자세히 설명하겠습니다.

---

React Router 설치

먼저 React Router를 설치해야 합니다. npm 또는 yarn을 이용하여 설치할 수 있습니다.

npm install react-router-dom

또는

yarn add react-router-dom

---

라우터 설정

React Router를 사용하기 위해서는 애플리케이션 내에서 라우터를 설정해야 합니다. BrowserRouter 컴포넌트를 사용하여 라우터를 감싸줍니다.

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

function App() {
  return (
    <Router>
      {/* 여기에 라우팅에 따른 컴포넌트를 정의합니다 */}
    </Router>
  );
}

---

라우팅 정의

Route 컴포넌트를 사용하여 URL과 해당 URL에 대응되는 컴포넌트를 매핑합니다. exact 속성을 사용하여 정확한 경로와 일치하는 경우에만 해당 컴포넌트를 렌더링하도록 설정할 수 있습니다.

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

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

위의 코드에서 Home, About, Contact 컴포넌트는 각각 /, /about, /contact URL에 대응되는 컴포넌트입니다.

---

링크 설정

Link 컴포넌트를 사용하여 라우터 간에 이동하는 링크를 설정할 수 있습니다.

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
    </nav>
  );
}

위의 코드에서 Link 컴포넌트를 사용하여 /, /about, /contact로 이동하는 링크를 설정하고 있습니다.

---

URL 파라미터

동적인 URL을 다루기 위해 URL 파라미터를 사용할 수 있습니다.

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

function App() {
  return (
    <Router>
      <Route path="/post/:id" component={Post} />
    </Router>
  );
}

위의 코드에서 :id는 동적인 URL 파라미터로, /post/1, /post/2와 같이 숫자가 변경되면 해당 숫자에 따라 다른 Post 컴포넌트가 렌더링됩니다.

---

React 라우팅은 싱글 페이지 애플리케이션에서 여러 페이지 간의 전환을 관리하는데 사용되며, React Router 라이브러리를 통해 구현할 수 있습니다. BrowserRouter, Route, Link 등의 컴포넌트를 사용하여 라우팅을 설정하고, URL 파라미터를 활용하여 동적인 URL을 처리할 수 있습니다. React 라우팅을 활용하여 웹 애플리케이션의 사용자 경험을 향상시켜보세요!