React Router

🚀 Router 기초 사용법

React에서는 React Router를 사용하여 페이지 이동(라우팅)을 구현할 수 있습니다. 단일 페이지 애플리케이션(SPA)에서도 가상의 URL을 관리하고, 화면을 동적으로 변경할 수 있습니다.

1. React Router 설치

React Router를 사용하려면 패키지를 먼저 설치해야 합니다.

npm install react-router-dom

2. 기본 사용법

React Router에서 가장 중요한 컴포넌트는 다음과 같습니다.

• BrowserRouter: 라우터의 기본 설정
• Routes: 여러 개의 Route를 그룹화
• Route: 특정 경로(path)에 따라 컴포넌트를 렌더링
• Link: 페이지 이동을 위한 네비게이션 링크

3. 기본 라우팅 예제

아래는 React Router를 사용하여 간단한 페이지 이동을 구현하는 예제입니다.

// App.jsx import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './Home'; import About from './About'; function App() { return ( <Router> <nav style={{ padding: '10px', background: '#3498db', color: 'white' }}> <Link to="/" style={{ marginRight: '10px', color: 'white' }}>홈</Link> <Link to="/about" style={{ color: 'white' }}>소개</Link> </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Router> ); } export default App;

// Home.jsx import React from 'react'; function Home() { return <h2>홈 페이지</h2>; } export default Home;

// About.jsx import React from 'react'; function About() { return <h2>소개 페이지</h2>; } export default About;

4. 동적 라우팅 (URL 파라미터)

React Router는 동적 라우팅을 지원하여 URL의 일부를 변수처럼 사용할 수 있습니다.

// App.jsx import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Post from './Post'; function App() { return ( <Router> <Link to="/post/1">1번 게시글</Link> <Routes> <Route path="/post/:id" element={<Post />} /> </Routes> </Router> ); }

// Post.jsx import { useParams } from 'react-router-dom'; function Post() { const { id } = useParams(); return <h2>게시글 ID: {id}</h2>; } export default Post;

5. 페이지 이동 (useNavigate)

useNavigate를 사용하면 버튼 클릭 시 프로그래밍 방식으로 페이지 이동이 가능합니다.

// Page.jsx import { useNavigate } from 'react-router-dom'; function Page() { const navigate = useNavigate(); return ( <div> <button onClick={() => navigate('/about')}>소개 페이지로 이동</button> </div> ); } export default Page;

📌 결론

• React Router를 사용하면 SPA에서 가상의 URL을 관리할 수 있음
• Route와 Link를 활용하여 페이지 이동 구현
• useParams와 useNavigate를 활용하면 동적 라우팅 및 프로그래밍 방식 이동 가능