React Router

Vite로 만든 프로젝트를 기준으로 설명하겠습니다.

---

1단계: 라이브러리 설치

터미널(VS Code 하단 터미널)에서 현재 프로젝트 폴더 안으로 이동한 뒤 아래 명령어를 입력합니다.

Bash

 

npm install react-router-dom

이 명령어를 치면 package.json 파일의 dependencies 항목에 react-router-dom이 추가된 것을 확인할 수 있습니다.

---

2단계: 최상단 컴포넌트 감싸기 (main.jsx 또는 index.jsx)

라우팅 기능을 앱 전체에서 사용하려면, 가장 뿌리가 되는 부분을 <BrowserRouter>로 감싸야 합니다.

main.jsx 수정 예시:

JavaScript

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom'; // 1. 불러오기

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter> {/* 2. App을 감싸기 */}
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

---

3단계: 페이지 컴포넌트 준비

각 주소에 따라 보여줄 '페이지용' 컴포넌트들을 간단히 만듭니다. (실무에서는 src/pages/ 폴더를 만들어 관리합니다.)

• Home.jsx: 메인 화면
• BoardList.jsx: 게시판 목록 화면
• PostDetail.jsx: 게시글 상세 화면

---

4단계: App.jsx에서 라우트 설정

이제 주소창의 경로(path)와 컴포넌트(element)를 연결해 줍니다.

JavaScript

 

import { Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import BoardList from './pages/BoardList';
import PostDetail from './pages/PostDetail';

function App() {
  return (
    <div className="App">
      <nav style={{ padding: '20px', borderBottom: '1px solid #ccc' }}>
        {/* Link는 새로고침 없이 주소만 바꿉니다. */}
        <Link style={{ marginRight: '10px' }} to="/">홈</Link>
        <Link to="/list">게시판</Link>
      </nav>

      <main style={{ padding: '20px' }}>
        {/* 주소에 따라 실제 화면이 바뀌는 영역 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/list" element={<BoardList />} />
          {/* :id는 '동적 파라미터'로, /post/1, /post/100 등을 모두 처리합니다. */}
          <Route path="/post/:id" element={<PostDetail />} />
        </Routes>
      </main>
    </div>
  );
}

export default App;

---

5단계: 상세 페이지에서 ID 읽기 (useParams)

/post/1로 접속했을 때 숫자 1을 알아내야 그 글을 DB에서 가져오겠죠? 이때 **useParams**라는 훅을 사용합니다.

PostDetail.jsx 예시:

JavaScript

 

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

function PostDetail() {
  // 주소창의 :id 부분의 값을 가져옵니다.
  const { id } = useParams();

  return (
    <div>
      <h2>{id}번 게시글 상세 페이지</h2>
      <p>서버에서 {id}번에 해당하는 데이터를 불러오는 로직이 들어갑니다.</p>
    </div>
  );
}

---

💡 핵심 요약

1. 설치: npm install react-router-dom
2. 연결: <Link to="/주소">를 누르면 주소창이 변함.
3. 매칭: <Routes>가 주소창을 감시하다가 <Route path="/주소">와 일치하는 컴포넌트를 화면에 띄움.
4. 변수 처리: :id 같은 동적 주소는 useParams()로 읽어옴.

이것이 리액트 라우터의 핵심 사이클입니다.

 

※ 해당 내용은 Google Gmini3.0에서 작성되었습니다.