라우팅 & SPA

라우팅?

 웹 애플리케이션 에서는 URL을 통해 요청을 보내고 받습니다. URL에 따른 어떠한 페이지를 보여줄 수도 있고, 어떠한 동작을 수행할수도 있습니다. 웹에서의 라우팅이라는 개념은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것을 의미합니다.

 예를 들어 게시판 서비스를 제공하는 웹 사이트가 있다고 가정해 봤을 때 해당 사이트에서는 글목록, 글쓰기 , 글수정, 글상세보기 ... 등등의 여러 페이지가 필요합니다. 이런 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해하며 프로젝트를 관리하기 위해 필요한 시스템이 바로 라우팅 시스템 입니다 

 리액트에서 대중적으로 많이 사용하는 라우팅 서비스는 크게 두가지가 있습니다.

• 리액트 라우터 : 가장 오래됐고, 가장 많이 사용하는 컴포넌트 기반의 라우팅 시스템 
• Next.js : 리액트 프로젝트의 프레임워크이며 파일 경로 기반으로 작동하는 서비스 

 

SPA(Single Page Application)

 

 SPA(Single Page Application) 직역하자면 하나의 페이지로 이루어진 웹 애플리케이션을 의미합니다. 그런데 방금 라우팅에 대한 설명만 들었을 때는 URL 마다마다 여러 페이지로 구성된 프로젝트가 리액트에서는 사용되는 거 같은데 왜 리액트가 SPA로 불리는지 의문이 들 수 있습니다. 

 이를 이해하기 위해 SPA와 반대의 개념인 MPA(Multi Page Application) 과의 비교를 통해 알아보겠습니다.

 

• MPA 

먼저 MPA의 클라이언트 단과 서버단 요청 작동을 나타낸 그림보터 살펴보겠습니다.  MPA는 위와 같이 어떤 요청(페이지 요청)이 들어올때 마다 서버에서 렌더링 된 정정 리소스(HTML, CSS, JS) 들이 클라이언트단으로 보내지게 됩니다

• SPA 

 

다음은 SPA의 동작 그림입니다. SPA는 위에 보이는 대로 첫 요청시 딱 한번 페이지를 불러옵니다 그 이후 요청이 올 경우 처음 불러온 이 페이지 내부를 수정하여 클라이언트단에서 보여주는 방식입니다.

리액트와 같은 경우 SPA에 해당하며 위 설명과 같이 서버에서 한번 HTML을 가져온 후 그 이후에는 필요한 데이터만 받아와 업데이트를 진행합니다. 

결과적으로 한페이지만 존재하지만 이 한 페이지를 요청에 맞게 수정해가며 사용하기 때문에 사용자는 마치 한페이지를 여러 페이지가 존재하는 것처럼 느끼고 사용할 수 있습니다.

 리액트 라우터, Next.js와 같은 라우팅 시스템은 브라우저 주소창에 입려된 URL에 따라 새로운 정적리소스스들을 불러오는 것이 아니라 기존에 띄웠던 웹 페이지를 유지하면서 다른 페이지를 보여주게 됩니다.