SPA 라우팅

오늘은 React에서 페이지 이동을 처리하는 라우팅에 대해 공부한 내용을 정리 해보았다.

우선, 라우팅에 대한 내용을 알아보기 전에 SPA와 MPA에 대한 개념부터 알고가자.

SPA란, Single Page Application의 약자로 서버에서 주는 HTML이 하나인 어플리케이션을 뜻하고, 첫 요청시 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지의 내부를 수정해서 보여주는 방식이다.

MPA란, Multi Page Application의 약자로 웹사이트를 구성하는 HTML 파일이 여러개 존재하는 경우를 말한다.

이에 따른, SPA와 MPA의 장단점이 여러개 존재하지만, 대표적인 장단점을 살펴보면 아래와 같다.

	장점	단점
SPA	최초 페이지를 로딩한 시점부터는 페이지 리로딩 없이 필요한 부분만 서버로부터 받아서 화면을 갱신하는 것이기 때문에 빠르고 깜빡거림이 없다.	사용자가 안들어가 볼 페이지까지 처음에 모든 컴포넌트를 한번에 전부 가지고 오기 때문에 아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려진다.
MPA	MPA는 완성된 형태의 HTML 파일을 서버로부터 전달받기 때문에, 검색엔진이 페이지를 크롤링하기에 적합하다. 서버에서 이미 렌더링해 가져오기 때문에, 첫 로딩에 걸리는 시간이 매우 짧다.	페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 불러와 비효율적이다. ex)사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있고, 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다.

 위와 같이, 전통적인 웹사이트의 페이지 구성은 MPA로 이루어져 있지만, React에서는 SPA, html을 하나만 가지고 있다. 하지만, SPA도 브라우저 주소창대로 다른 페이지를 보여주는 것이 가능한데, 브라우저 주소에 따라 다른 페이지를 보여주는 것을 라우팅이라고 한다.

라우팅은 이미 만들어진 라이브러리가 존재하기 때문에, 라이브러리를 설치하는 것만으로 바로 활용할 수 있다.

라이브러리를 설치하면 import를 통해 이름을 정하고 바로 페이지들끼리 연결을 시켜줄 수 있다.

라우팅을 통한 페이지 연결을 확인하기 위해 임의로 추가 js파일을 몇 개 만들어준다.

추가로 만든 페이지들의 주소를 연결시키는 방법을 적용해보자

이제 주소창에 path경로를 적으면 페이지에 적은 내용이 화면에 비춰지는것을 확인 할 수 있다.

라우팅이라는 이름은 생소하지만, 라이브러리를 사용해 몇 번만 반복해서 연습하면 그다지 어렵지 않게 페이지 연결을 할 수 있을 것 같다.