11. 라우터로 SPA 개발하기

SPA : Single Page Application의 약어로 한 페이지로 이루어진 애플리케이션을 말한다.

 

이전까지는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고 페이지를 로딩할 때마다 서버에서 리소스를 전달받아 해석한 뒤 화면에 보여주었다.(화면을 서버측에서 준비)

 

요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여줄 때마다 서버 측에서 모든 뷰를 준비한다면 성능의 문제가 발생할 수 있다. (ex. traffic많거나, 사용자몰려서 서버에 높은 부하) 캐싱과 압축을 해서 서비스 제공하면 최적화는 가능하지만 바뀌지 않는 부분까지 새로 불러와서 보여주어야 하는 불필요한 로딩도 있기 때문에 비효율적이다.그래서 뷰 렌더링을 사용자의 브라우저가 담당하고, 앱을 브라우저에서 불러와서 실행시킨 후 사용자와의 인터랙션이 발생하면 필요한 부분만 js를 사용하여 업데이트해준다. 

 

라우팅 : 다른 주소에 다른 화면을 보여주는 것

라우팅은 react library에 내장되어있지 않기 때문에 react-router, reach-router 등 여러가지가 있는데 가장 많이 사용하는 react-router를 사용해보자. 클라이언트 사이드에서 이루어지는 라우팅을 간단하게 구현할 수 있을 뿐만 아니라 서버 사이드 렌더링을 할 때도 라우팅을 도와주는 컴포넌트들을 제공해준다.

 

 

SPA의 단점

앱의 규모가 커지면 js 파일이 너무 커진다.

-> code splitting을 사용하면 라우트별로 파일들을 나누어서 트래픽과 로딩 속도 또한 개선할 수 있다.

js가 실행될 때까지 페이지가 비어있기 때문에 js 파일이 로딩되어 실행되는 짧은 시간 동안 흰 페이지가 나타날 수 있다.

-> server-side-rendering을 통해 해결할 수 있다.

 

 

이제 실습해보자 !

1 ) 리액트 프로젝트 생성

yarn create react-app router-tutorial

2 ) react-router 라이브러리 설치

cd router-tutorial
yarn add react-router-dom

3 ) 코드는 git에서 확인

여기에서 :id, :username으로 설정하면 각각의 값을 갖고있는 데이터에서 조회하여 해당 주소를 보여줄 수 있다.

 

* profiles.js

여기에서 component 대신 render라는 props를 사용하는데, 컴포넌트 자체를 전달하는 것이 아니라 JSX를 보여주기 위함이다.

 

* react-router 부가기능 중 history객체는 match, location과 함께 전달되는 props이다. 이 객체를 통해 뒤로가기 / 로그인 후 화면 전환 / 다른페이지로 이탈 방지 등을 구현할 수 있다.