[React] Route 라우터

 

SPA란

Single Page Application (싱글 페이지 어플리케이션) 의 약자입니다. 말 그대로, 페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청 할 때 마다 페이지가 새로고침되며, 페이지를 로딩 할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다.

요즘은 웹에서 제공되는 정보가 정말 많기 때문에 속도적인 측면에서 문제가 있었고, 이를 해소하기 위하여 캐싱과 압축을 하여 서비스가 제공되는데요. 이는 사용자와 인터랙션이 많은 모던 웹 어플리케이션에서는 충분하지 않을 수도 있습니다. 렌더링하는것을 서버쪽에서 담당한다는것은, 그 만큼 렌더링을 위한 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문입니다.

그래서 리액트 같은 라이브러리 혹은 프레임워크를 사용해서 뷰 렌더링을 유저의 브라우저가 담당하도록 하고, 우선 어플리케이션을 브라우저에 로드 한 다음에 정말 필요한 데이터만 전달받아 보여줍니다.

싱글페이지라고 해서, 한 종류의 화면만 있는건 아닙니다. 예를들어 블로그를 만든다면, 홈, 포스트 목록, 포스트, 글쓰기 등의 화면이 있습니다. 또한 이 화면에 따라 주소도 만들어줘야 합니다. 주소가 있어야, 유저들이 북마크도 할 수 있고 서비스에 구글을 통해 유입될 수 있기 때문이죠. 다른 주소에 따라 다른 뷰를 보여주는것을 라우팅 이라고 하는데요, 리액트 자체에는 이 기능이 내장되어있지 않습니다. 따라서 직접 브라우저의 API 를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 합니다.

 

SPA 의 단점

SPA 의 단점은, 앱의 규모가 커지면 자바스크립트 파일 사이즈가 너무 커진다는 것 입니다. 유저가 실제로 방문하지 않을수도 있는 페이지에 관련된 렌더링 관련 스크립트도 불러오기 때문입니다. 하지만 코드 스플리팅을 사용한다면 라우트 별로 파일들을 나눠서 트래픽과 로딩속도를 개선 할 수 있습니다.

리액트 라우터같이 브라우저측에서 자바스크립트를 사용하여 라우트를 관리하는것의 잠재적인 단점은, 자바스크립트를 실행하지 않는 일반 크롤러에선 페이지의 정보를 제대로 받아가지 못한다는 점 입니다. 때문에, 구글, 네이버, 다음 등 검색엔진에서 페이지가 검색결과에서 잘 안타날수도 있습니다. 추가적으로, 자바스크립트가 실행될때까지 페이지가 비어있기 때문에, 자바스크립트 파일이 아직 캐싱되지 않은 사용자는 아주 짧은 시간동안 흰 페이지가 나타날 수도 있다는 단점도 있습니다. 이는, 서버사이드 렌더링을 통하여 해결 할 수 있습니다.

 

SPA는 라우팅을 클라이언트가 담당합니다.

 

라우팅이란?

어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업을 의미합니다.

예전에는 보통 서버에서 관리하는 로직을 이제는 클라이언트가 관리하는 트렌드로 변경되었습니다.

 

주로 여러개의 페이지로 웹이 구성되어 있었는데, 유저가 페이지에 들어와서 login페이지로 들어가면 login페이지에 대한 정보를 서버로 요청하고, 서버에서 처리를해서 클라이언트에게 html 파일로 전달했었습니다. 이럴때에 문제는 새로운 데이터를 요청할 때마다 서버측에서 새로운 페이지를 받아와서 처리해야하다보니 인터렉션이 많을 수록 서버 자원이 사용되는것이고, 불필요한 트래픽도 낭비되기 때문입니다.

 

SPA에서는 어떤 주소에서 어떤 UI를 보여줄지를 클라이언트에서 결정합니다. 사용자가 페이지에 들어와서 login페이지를 들어가고 싶다면, 서버 페이지에 요청하지 않고 바로 들어갈 수 있으며, 만약에 동적인 값이 필요하다면 특정 API를 요청을 해서 특정 데이터를 json 형식으로 받아와서 보여줄 수 있습니다.

서버쪽에서는 서버쪽 자원을 많이 아낄 수 있으며, 클라이언트 쪽에서는 사용자가 더 좋은 사용자 경험을 누릴 수 있게 됩니다.

 

리액트 라우터는 컴포넌트를 기반으로 라우팅을 합니다.

컴포넌트를 렌더링하고 그 곳에 필요한 값을 props로 넣어줘서 라우트 설정을 하는 방식입니다.

 

Next.js

서버사이드 렌더링을 엄청나게 쉽게 구현할 수 있습니다. 그리고 코드 스플리트도 쉽게 할 수 있습니다.
큰 차이점은 파일 경로와 이름을 기반으로 라우팅합니다.

 

 

리액트 라우터에서 사용되는 주요 컴포넌트

 

• BrowserRouter
  - HTML5에 History API라는 것이 있는데, History API를 사용하면 브라우저의 주소표시줄에 나타나는 경로를 바꿔줄 수 있는데 서버 측에 따로 요청하지 않고 변경할 수 있게됩니다.
• HashRouter
  - 예전에 사용하던 Router입니다. 주소뒤에 해쉬태그를 넣어 사용합니다. #이 들어가고 못생져지지만, 옛날 브라우저에서 작동할 수 있게 됩니다.
• MemoryRouter
  - 브라우저의 주소와 무관합니다. 브라우저가 아닌 환경에서 쓰기 좋습니다. 테스트 환경이나 리액트 네이티브에서 사용하기 좋습니다.
• StaticRouter
  - 서버사이드 렌더링에서 사용하는 용도입니다.
• Route
  - 라우트를 정의할 때 사용하는 컴포넌트
• Link
  사용한 Router의 주소만 바꿉니다. a태그지만 새로고침 되지 않습니다.