Ming's develop story

Chapter3 - 라우팅(Routing)이란? 본문

스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본

Chapter3 - 라우팅(Routing)이란?

Ming 2021. 11. 18. 10:06

SPA란?

Single Page Application! 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이다. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만 정적자원을 받아온다.

왜 굳이 html을 하나만 줄까? 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문이다.

페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이다. (사용자가 회원가입하다가 적었던 내용이 날아갈 수도 있고, 블로그같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와 카테고리까지 전부 다시 불러와야 한다.)

 

단점은 없나? SPA는 딱 한 번 정적자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다.

즉, 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. 게다가 한 번에 전부 가지고 오니까 아주아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려진다.

 

라우팅이란?

 

SPA는 주소를 어떻게 옮길 수 있을까? html은 딱 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부른다.

전부 직접 구현하나?

  • 이번엔 리액트 사용자들이 가장 많이 쓰는 라우팅 라이브러리를 가져와서 사용해볼것이다.(다음 포스팅)
  • 이미 만들어진 라우팅 라이브러리가 있다!
Comments