[React] App Router, Page Router 비교해보자

React에서 'App Router'와 'Page Router' 확인

웹 개발을 시작하고 1년이 됐지만 아직도 잘 모르는 초보자 티를 벗어나지 못한 나다. 그래서 최근 프로젝트를 진행 할때 리액트로 구축하는데 'App Router'하고, 'Page Router'를 비교해서 만들게 되는데... 리액트에서 라우팅은 매우 중요한 요소입니다. 특히, 리액트와 같은 프레임워크에서는 라우팅을 통해 페이지 간의 이동과 데이터 관리를 효율적으로 할 수 있다 합니다.

이번 글에서는 React에서 많이 사용되는 'App Router'와 'Page Router' 를 비교하여 공부 해보도록 하겠습니다. 이를 통해 각 라우터의 특징과 사용 사례를 이해할 수 있었으면 좋겠고, 프로젝트에 적합한 라우터를 선택할 수 있는 개발자가 되어보자.

App Router란?

가장 좋은건 리액트의 router 관련 공식 문서를 보는게 좋다. 여기를 클릭해서 공식 문서를 챙겨보자

'app router'는 애플리케이션 전체의 라우팅을 관리하는 라우터라고 합니다. React에서 일반적으로 사용하는 라우팅 라이브러리인 React Router가 여기에 해당합니다.

주요 특징

• 중앙 집중식 라우팅: 애플리케이션의 모든 라우팅을 한 곳에서 관리합니다.
• 동적 라우팅 지원: URL에 따라 컴포넌트를 동적으로 로드할 수 있습니다.
• 중첩 라우팅: 여러 레벨의 중첩된 라우트를 지원하여 복잡한 UI 구조를 구현할 수 있습니다.

사용 예시

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

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

Page Router란?

Page Router 공식 문서 및 홈페이지는 여기를 클릭해 정확한 내용을 확인할수 있다.

'page router'는 내가 이하한 바로는 개별 페이지의 라우팅을 관리하는 라우터입니다. Next.js에서 제공하는 파일 기반 라우팅 시스템이 여기에 해당된다 볼 수 있다.

주요 특징

• 파일 기반 라우팅: 파일 구조에 따라 라우팅이 자동으로 설정됩니다.
• 정적 사이트 생성: 정적 페이지를 미리 생성하여 성능을 최적화합니다.
• 서버 사이드 렌더링: 페이지를 서버에서 렌더링하여 SEO와 초기 로드 속도를 개선합니다.

사용 예시

// pages/index.js
export default function Home() {
  return <h1>홈 페이지</h1>;
}

// pages/about.js
export default function About() {
  return <h1>테스트 페이지</h1>;
}

 

 

두 가지 라우터를 비교

app router와 page router는 각기 다른 기능을 제공합니다.

• app router: 중앙에서 라우팅을 관리하고, 동적 라우팅 및 중첩 라우팅을 지원합니다.
• page router: 파일 기반으로 라우팅을 설정하며, 정적 사이트 생성 및 서버 사이드 렌더링을 지원할 수 있습니다.

각 라우터의 성능 차이를 살펴보면 아래와 같습니다.

• app router: 클라이언트 사이드 라우팅으로 초기 로드 속도가 빠르며, 페이지 전환이 부드럽습니다.
• page router: 서버 사이드 렌더링을 통해 초기 로드 속도와 SEO를 개선할 수 있습니다.

각 라우터의 사용 사례를 비교해 보겠습니다.

• app router: 복잡한 UI 구조와 동적 라우팅이 필요한 대규모 애플리케이션에 적합하다고 할 수 있다.
• page router: 간단한 파일 기반 라우팅과 정적 사이트 생성을 필요로 하는 프로젝트에 적합합니다.

언제 어떤 라우터를 사용해야 할까?

가장 중요한건, 어떤 프로젝트 만들어야 하느냐에 따라서 유형별 적합한 라우터를 선택하는 기준이 필요 할듯 합니다.

이런 기준을 확인한걸 종합해 본다면 아래 내용으로 정리 할 수 있습니다.

• app router: SPA, 대규모 애플리케이션, 복잡한 라우팅 구조를 필요로 하는 프로젝트
• page router: 블로그, 정적 웹사이트, SEO가 중요한 프로젝트

각 라우터의 장단점

어떤 라우터로 하느냐에 따라서 차이가 있겠지만 당연하게 모든건 장점과 단점이 있습니다.

app router의 장단점은 유연한 라우팅이 가능하고 중첩 라우팅 지원되게 장정인 방면에 설정이 보잡할수 있는 단점을 가지고 있습니다.

이 와 다르게 page router는 설정이 간편하고 자동으로 라우팅이 되며 정적이 사이트 생성에 적합하지만 유연성이 떨어질수있는 단점이 있음으로 프로젝트에 따라서 선택을 고려해야 합니다.

• app router 장점: 유연한 라우팅, 중첩 라우팅 지원, 클라이언트 사이드 라우팅
• app router 단점: 설정이 복잡할 수 있음
• page router 장점: 간편한 설정, 자동 라우팅, 서버 사이드 렌더링 및 정적 사이트 생성
• page router 단점: 유연성이 떨어질 수 있음

결론

React에서 'app router'와 'page router'는 각각의 장단점을 가지고 있으며, 프로젝트의 요구 사항에 따라 선택할 수 있습니다. 복잡한 라우팅과 동적 페이지 로딩이 필요한 대규모 애플리케이션에는 'app router'가, 간편한 설정과 서버 사이드 렌더링이 필요한 프로젝트에는 'page router'가 적합합니다. 각 라우터의 특징을 잘 이해하고, 프로젝트에 맞는 라우터를 선택하여 효율적으로 개발할 수 있기를 바랍니다.

추가 학습 자료 및 참고 링크:

• React Router 공식 문서
• Next.js 공식 문서