본문 바로가기
리액트 (React)/Route, Redux

SPA & 라우팅 기본개념

by 후닝훈 2021. 9. 2.
반응형

 

Single Page Application 이란?

- 서버에서 주는 html이 1개 뿐인 어플리케이션.

- 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다.

- 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다.

- 사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있다.

- 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다.

    → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문.

 

단점

- 사용자가 안들어가 볼 페이지까지 전부 가지고 온다.

- 한 번에 전부 가지고 오니까 아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려진다.

 

 

라우팅이란?

- SPA가 주소를 옮기는 방법

- html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다.

- 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부른다.

- 리액트 사용자들이 많이 쓰는 라우팅 라이브러리를 가져와서 사용.

반응형

댓글