React Router DOM

1.준비하기

1.1 라이브러리 설치

npm install react-router-dom

 

1.2 main.jsx

import './index.css';

import React from 'react';
import App from './App.jsx';
import { createRoot } from 'react-dom/client';

createRoot(document.getElementById('root')).render(
    <App />
)

 

1.3 app.jsx

import React from 'react';
import { Link, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
import NotFound from './pages/NotFound';

const Home = () => <h2>홈 페이지</h2>;
const About = () => <h2>소개 페이지</h2>;
const Contact = () => <h2>연락처 페이지</h2>;

function App() {
    return (
        <Router>
            <nav>
                <ul>
                    <li><Link to="/">홈</Link></li>
                    <li><Link to="/about">소개</Link></li>
                    <li><Link to="/contact">연락처</Link></li>
                </ul>
            </nav>

            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </Router>
    );
}

export default App;

 

 

2.Router 부가기능, 훅과 컴포넌트

2.1 useParams, URL 파라미터 사용하기

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

const UserProfile = () => {
    const { id } = useParams();
    return <h2>사용자 ID: {id}</h2>;
};

function App() {
    return (
        <Router>
            <nav>
                <ul>
                    <li><Link to="/user/123">사용자 123</Link></li>
                    <li><Link to="/user/456">사용자 456</Link></li>
                </ul>
            </nav>

            <Routes>
                <Route path="/user/:id" element={<UserProfile />} />
            </Routes>
        </Router>
    );
}

export default App;

 

• useParams: 경로에서 URL 파라미터를 가져온다. /user/123에서 id 파라미터를 추출
• :id: Route 경로에 파라미터를 사용하여 동적 경로를 정의한다.

 

2.2 useNavigate, 프로그램적으로 네비게이션 처리

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

const Home = () => {
    const navigate = useNavigate();
    const goToPage = (page) => {
        switch (page) {
            case 'about':
                navigate('/about');
                break;
            case 'contact':
                navigate('/contact');
                break;
            default:
                console.log('Invalid page');
        }
    };
    return (
        <div>
            <h2>홈 페이지</h2>
            <button onClick={() => goToPage('about')}>소개 페이지로 이동</button>
            <button onClick={() => goToPage('contact')}>연락 페이지로 이동</button>
        </div>
    );
};

const About = () => <h2>소개 페이지</h2>;
const Contact = () => <h2>연락 페이지</h2>;

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

export default App;

 

• useNavigate: 현재 경로를 제어하고 프로그램적으로 다른 경로로 이동할 수 있게 하는 훅.
• navigate('/about')와 같이 사용

 

2.3 Navigate 컴포넌트 (리디렉션 처리)

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

const Home = () => {
    const isLoggedIn = false; // 로그인 여부 체크 (예시)

    if (!isLoggedIn) {
        return <Navigate to="/login" />;
    }

    return <h2>홈 페이지</h2>;
};

const Login = () => <h2>로그인 페이지</h2>;

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/login" element={<Login />} />
                <Route path="/home" element={<Home />} />
            </Routes>
        </Router>
    );
}

export default App;

 

• Navigate: URL을 변경하여 다른 페이지로 리디렉션
• 조건에 따라 Navigate를 사용하여 리디렉션을 처리할 수 있다.

 

2.4 useLocation, 현재 위치 경로 추적

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

const CurrentLocation = () => {
  const location = useLocation();
  return <h2>현재 경로: {location.pathname}</h2>;
};

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

export default App;

 

• useLocation: 현재 URL 경로와 상태 정보를 제공하는 훅

 

2.5 useParams 훅, 동적 경로에서 파라미터를 가져오기

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

const UserProfile = () => {
    const { id } = useParams();
    return <h2>사용자 ID: {id}</h2>;
};

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/user/:id" element={<UserProfile />} />
            </Routes>
        </Router>
    );
}

export default App;

 

• useParams: 경로에서 파라미터를 추출 예를 들어, /user/123 경로에서 id는 123

 

2.6 중첩 라우팅

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

const Dashboard = () => (
    <div>
        <h2>대시보드</h2>
        <nav>
            <ul>
                <li><Link to="profile">프로필</Link></li>
                <li><Link to="settings">설정</Link></li>
            </ul>
        </nav>

        <Routes>
            <Route path="profile" element={<h3>프로필 페이지</h3>} />
            <Route path="settings" element={<h3>설정 페이지</h3>} />
        </Routes>
    </div>
);

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/dashboard/*" element={<Dashboard />} />
            </Routes>
        </Router>
    );
}

export default App;

 

• 중첩 라우팅: Dashboard 컴포넌트 안에서 다른 경로들을 중첩해서 렌더링.
• *을 사용하여 하위 경로들을 모두 처리