[React] 고급: React-Router를 활용하여 페이지 이동

들어가며..

Router: URL에 따른 페이지 이동

React-Router: React에서 URL에 따른 페이지 이동

 

Client-Side vs Server-Side

Client-Side Routing vs Server-Side Routing

• Client-Side Routing: 
•  Server-Side Routing:

Client-Side Rendering vs Server-Side Rendering

• Client-Side Rendering
• Server-Side Rendering

 

React-Router 설정

1. 리액트 라우터 설치
2. 폴더 구조 설정
3. Vite 설정 파일(vite.config.js)에 절대 경로 별칭 설정

 

리액트 라우터 설치

리액트 라우팅을 위해 react-router-dom 패키지를 설치

npm install react-router-dom localforage match-sorter sort-by

 

폴더 구조 설정

• 프로젝트 폴더 내에서 라우팅에 필요한 폴더와 파일을 구성
• 보통 페이지 컴포넌트를 모아 놓는 pages 폴더와, 라우팅 설정을 담을 routers 폴더 생성

my-app/
├── public/
└── src/
    ├── components/         # 공통 컴포넌트 (예: Header, Footer)
    ├── pages/              # 각 페이지 컴포넌트를 모아 놓는 폴더
    │   ├── Home.jsx        # 홈 페이지 컴포넌트
    │   ├── About.jsx       # About 페이지 컴포넌트
    │   ├── Contact.jsx     # Contact 페이지 컴포넌트
    │   └── NotFound.jsx    # 404 페이지 컴포넌트
    ├── routers/             # 라우터 설정 파일
    │   └── AppRouter.jsx   # 라우팅 설정
    ├── App.jsx             # 앱 메인 컴포넌트
    └── main.jsx            # 엔트리 파일 (Vite 기본)

 

 

Vite 설정 파일(vite.config.js)에 절대 경로 별칭 설정

프로젝트가 커지면 import 경로가 ../../../components/Button처럼 복잡한 상대 경로가 되기 쉽기에 별칭을 사용하여 간단하고 명확한 경로로 작성

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: [
            { find: '~/components', replacement: '/src/components' },
            { find: '~/lib', replacement: '/src/lib' },
            { find: '~/routers', replacement: '/src/routers' },
            { find: '~/pages', replacement: '/src/pages' },
        ],
    },
});

 

개발 순서

1. 각 페이지 컴포넌트 생성
2. 라우터 설정 파일(AppRouter.jsx) 생성
3. App.jsx에서 라우터 사용

 

각 페이지 컴포넌트 생성

src/pages 폴더 내에 페이지 컴포넌트를 생성

// src/pages/Home.jsx
import React from 'react';

export default function Home() {
    return <h1>Home Page</h1>;
}

// src/pages/NotFound.jsx
import React from 'react';

export default function NotFound() {
    return <h1>404 - Page Not Found</h1>;
}

 

라우터 설정 파일(AppRouter.jsx) 생성

src/routes/AppRouter.jsx 파일을 만들어서, 라우터 설정을 구성

// src/routes/AppRouter.jsx
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '~/pages/Home';
import About from '~/pages/About';
import Contact from '~/pages/Contact';
import NotFound from '~/pages/NotFound';

export default function AppRouter() {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} />
                <Route path="/contact" element={<Contact />} />
                <Route path="*" element={<NotFound />} />
            </Routes>
        </Router>
    );
}

 

 

App.jsx에서 라우터 사용

src/App.jsx 파일에서 AppRouter 컴포넌트를 사용하여 라우팅 기능을 활성화

// src/App.jsx
import React from 'react';
import AppRouter from '~/routes/AppRouter';

export default function App() {
    return (
        <div>
            <h1>My Vite React App</h1>
            <AppRouter />
        </div>
    );
}