240523 TIL

React Router DOM

React Router DOM은 React 애플리케이션에서 클라이언트 측 라우팅을 구현하기 위한 라이브러리입니다. React Router는 URL을 통해 애플리케이션의 다른 부분으로 사용자를 안내하고, URL 상태를 관리할 수 있게 도와줍니다. 이로써 사용자 경험을 향상시키고, SPA(Single Page Application) 특성을 극대화할 수 있습니다.

주요 개념 및 기능

1. Router
   • BrowserRouter: HTML5의 히스토리 API를 사용하여 URL을 제어합니다.
   • HashRouter: URL의 해시(#)를 사용하여 라우팅을 관리합니다.
2. Routes와 Route
   • Routes: 여러 라우트를 그룹화하는 컨테이너 역할을 합니다.
   • Route: URL 경로와 해당 경로에 매칭되는 컴포넌트를 지정합니다.

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

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

3. Link와 NavLink
   • Link: 페이지를 새로고침하지 않고 다른 경로로 이동할 수 있게 도와줍니다.
   • NavLink: 활성 상태(active state)를 가질 수 있는 링크로, 현재 경로와 매칭될 때 특정 스타일이나 클래스를 적용할 수 있습니다.

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

function Navbar() {
  return (
    <nav>
      <NavLink to="/" end>Home</NavLink>
      <NavLink to="/about">About</NavLink>
    </nav>
  );
}

4. useNavigate
   • 프로그래밍 방식으로 경로를 이동할 수 있게 해주는 훅입니다.

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

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

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

  return <button onClick={handleClick}>Go to About</button>;
}

5. useParams
   • 현재 경로의 URL 파라미터를 가져올 수 있게 해주는 훅입니다.

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

function Post() {
  const { postId } = useParams();
  // postId를 사용하여 데이터를 가져오거나 다른 작업을 수행
}

6. useLocation
   • 현재 경로에 대한 정보를 가져올 수 있게 해주는 훅입니다.

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

function LocationDisplay() {
  const location = useLocation();
  return <div>Current location: {location.pathname}</div>;
}

7. Nasted Routes
   • 중첩된 라우트를 정의하여 계층적 구조의 경로를 쉽게 관리할 수 있습니다.

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

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

배운 점

• React Router DOM은 SPA의 라우팅을 매우 효율적으로 관리할 수 있는 도구입니다.
• URL 상태를 관리하고, 사용자 경험을 향상시키기 위한 다양한 훅과 컴포넌트를 제공합니다.
• 다양한 라우팅 요구사항(예: 중첩된 라우트, 동적 파라미터, 프로그래밍 방식의 네비게이션 등)에 대응할 수 있습니다.
• 단순한 라우팅부터 복잡한 네비게이션 로직까지 유연하게 구현할 수 있습니다.

결론

React Router DOM은 React 애플리케이션의 핵심적인 라이브러리 중 하나로, 이를 잘 활용하면 사용자에게 더 나은 경험을 제공할 수 있습니다. 앞으로도 더 복잡한 라우팅 시나리오를 다루어보고, 다양한 기능을 탐구해 나가야겠습니다.