[React] 34. 페이지 라우팅

Mar 09, 2026

Contents

1. 페이지 라우팅이란

💡

경로에 따라 알맞은 페이지를 렌더링 하는 과정

💡

리액트는 SPA방식으로 동작된다.

SPA는 Single Page Application이라는 뜻으로,

하나의 페이지에서 사이트의 모든 기능을 수행할 수 있음을 말한다.

리액트로 만들어지지 않은 일반적인 홈페이지는 MPA 방식을 따른다.

Multi Page Application의 준말로, 서버에서 여러 개의 페이지를

가지고 있는 방식인데 사용자가 요청하는 모든 페이지를 렌더링된 상태로

서버가 가지고 있는 것이다.

이러한 방법은 아주 간단한 페이지에서는 문제가 되지 않으나

프로젝트 규모가 커지면 단점이 드러난다.

먼저 이 방식은 여러 페이지를 가지고 있는 웹사이트일 때

서버에서 완성된 모든 html 파일을 가지고 있고, 클라이언트가

페이지 이동을 요청할 때마다 서버가 이를 렌더링하여 통째로

넘겨줘야한다.

이 방식을 서버 사이드 렌더링이라고 하는데, 여러 사용자가 동시에

요청을 보낼 때 서버에 과부하가 올 수 있고, 브라우저에서 페이지 전체가

갈아끼워지는 원리이기 때문에 깜빡이는 현상도 발생한다.

서버의 상태에 따라 렌더링이 느려질 가능성도 있고

사용자가 몰릴 경우 심하면 서버가 뻥날수도 있다.

리액트가 사용하는 방식인 SPA 방식 (Single Page Application)은

이러한 MPA 방식의 단점을 개선할 수 있다.

단 하나의 페이지에서 동작하는 방식으로 최초에 클라이언트에서

사이트 접속을 위해 요청을 보내면 서버에서는 한 번 index.html 파일을

돌려준다.

그리고 그와 함께 번들링된 js 파일을 넘겨준다.

버들링된 js파일은 리액트 애플리케이션에서 작성된

모든 js를 vite가 묶어서 하나의 js 파일로 만들어둔 것이다.

index.html 파일은 이 js 파일을 실행하는데 이때 실행되는게

main.jsx 파일이고 여기서 rander 명령어로 App 컴포넌트를

렌더링한다.

그럼 결국 화면이 렌더링되는건 서버쪽에서가 아니라 index.html에서

실행되는 것이라 클라이언트 측에서 렌더링하는것이다.

그래서 이 방식을 클라이언트 사이드 렌더링 (Client Side Rendering)이라 부른다.

페이지의 이동 시에도 전체 html이 다시 렌더링 되는 것이 아니라

변경이 일어나는 컴포넌트만 갈아끼워지기 때문에 효율적이다.