[FE] React(리액트) 라우팅과 Next.js 파일 기반 라우팅의 비교

React와 Next.js의 파일 기반 라우팅은 몇 가지 공통점과 차이점이 있습니다. React는 자체적으로 파일 기반 라우팅을 제공하지 않기 때문에, react-router-dom 같은 라우팅 라이브러리를 사용하여 경로를 수동으로 설정해야 하는 반면, Next.js는 기본적으로 파일 기반 라우팅을 제공하여, 파일 구조가 곧 라우팅 구조로 작동합니다. 이 두 가지 방식을 비교해 보겠습니다.

1. React에서의 라우팅 (react-router-dom)

React는 파일 기반 라우팅이 기본적으로 제공되지 않으며, 별도의 라우팅 라이브러리인 react-router-dom을 사용하여 경로를 설정해야 합니다.

설정 방식

1. 수동 라우팅 설정: 개발자가 직접 `Route` 컴포넌트를 사용해 경로를 지정하고, 각 경로에 해당하는 컴포넌트를 연결해야 합니다.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

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

export default App;

2. 링크 이동 : Link 컴포넌트나 useNavigate 훅을 사용하여 페이지 간 이동을 처리합니다.

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

function Home() {
  const navigate = useNavigate();
  return <button onClick={() => navigate('/about')}>Go to About</button>;
}

라우팅 관리 방식

- 라우팅을 위해 App.js나 별도의 라우팅 파일을 만들어 모든 경로를 수동으로 정의해야 합니다.
- 경로가 바뀔 때마다 해당 컴포넌트가 렌더링되며, 이는 클라이언트 사이드 라우팅(Client-Side Rendering) 방식입니다. 즉, 클라이언트 측에서 경로가 변경되고 브라우저는 전체 페이지를 다시 로드하지 않습니다.

---

2. Next.js에서의 파일 기반 라우팅

Next.js는 파일 기반 라우팅을 기본적으로 제공하여, pages 디렉토리에 있는 파일과 폴더 구조에 따라 자동으로 경로를 설정합니다. 별도의 라우팅 설정이 필요 없으며, Next.js는 이를 기반으로 경로를 자동으로 구성합니다.

설정 방식

- 자동 라우팅 설정: pages 폴더에 파일을 생성하는 것만으로 해당 파일이 URL 경로가 됩니다. 즉, 파일과 폴더 구조에 따라 경로가 자동으로 설정됩니다.

예를 들어:

• `pages/index.js` → `/` (루트 경로)
• `pages/about.js` → `/about`
• `pages/posts/[id].js` → `/posts/1`, `/posts/2` (동적 라우팅)
• 별도의 코드에서 라우트 설정을 하지 않아도, 파일과 폴더 이름이 그대로 URL로 반영됩니다.

/pages
├── index.js --> "/" 경로
├── about.js --> "/about" 경로
└── posts```
└── \[id\].js --> "/posts/\[id\]" 경로 (동적 라우팅)

- 링크 이동 : Next.js는 Link 컴포넌트를 사용해 경로 이동을 처리합니다. 별도의 라우팅 라이브러리 없이도 href 속성을 사용하여 경로 이동이 가능합니다.

import Link from 'next/link';

function Home() {
  return (
    <Link href="/about">
      <a>Go to About</a>
    </Link>
  );
}

라우팅 관리 방식

- 자동화된 라우팅 : 라우트 경로를 수동으로 설정하지 않아도, 파일을 만들면 해당 경로가 자동으로 설정됩니다. React와 달리, Next.js에서는 별도의 라우팅 설정 파일이 필요 없습니다.
- 서버 사이드 렌더링 지원 : Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하며, 이를 통해 각 경로에서 미리 렌더링된 HTML을 제공할 수 있습니다.

---

비교 요약

구분	React (react-router-dom)	Next.js
라우팅 방식	수동 설정 (라우팅 코드 필요)	자동 설정 (파일 기반)
경로 설정	`Route` 컴포넌트로 수동 정의	`pages` 디렉토리의 파일로 자동 정의
동적 라우팅	`useParams` 등을 사용하여 처리	`[id].js` 같은 파일 이름으로 처리
라우팅 설정의 위치	라우팅 파일(`App.js`)에 경로 정의	`pages` 폴더 구조에 따라 자동 설정
클라이언트 사이드 렌더링	주로 CSR(Client-Side Rendering)	CSR, SSR(Server-Side Rendering) 지원
라우팅 라이브러리	`react-router-dom` 같은 라이브러리 필요	자체 제공 (별도의 라이브러리 필요 없음)

---

결론

- React에서는 라우팅을 위한 추가 설정이 필요하며, 개발자가 직접 경로를 정의해야 합니다. `react-router-dom`을 사용해 수동으로 경로를 설정하고, 링크 이동을 처리해야 합니다.
- Next.js에서는 파일과 폴더 구조가 경로를 자동으로 정의하며, 파일 기반 라우팅을 기본적으로 제공합니다. 추가적인 설정 없이 파일을 생성하는 것만으로 경로가 자동으로 라우팅됩니다.

Next.js의 파일 기반 라우팅은 특히 간결하고 직관적이며, 별도의 코드 없이 자동으로 경로가 관리되기 때문에 프로젝트 규모가 커질수록 효율적입니다.