스파르타 코딩클럽 - 리액트 3주차(1)

1.SPA란?

SPA란 Single Page Application라고 부르며 말 그대로 서버에서 주는 HTML이 1개 뿐인 어플리케이션이다. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 HTML, CSS, JS(=정적자원들)을 내려둔다면, SPA는 딱 한번만 정적자원을 받아온다.

1-1. 왜 굳이 HTML을 하나만 줄까?

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

1-2. 단점은 없나?

단점도 존재한다. SPA는 딱 한 번 정적자원을 내려받아보니, 처음에 모든 컴포넌트를 받아온다. 즉, 사용자가 안들어가 볼 페이지까지 전부 가지고 온다. 게다가 한 번에 전부 가지고 오니까 아주아주 많은 컴포넌트가 있다면 첫 로딩 속도가 느려진다.

2. 라우팅이란?

HTML은 하나를 가지고 있지만, SPA도 브라우저 주소창대로 다른 페이지를 보여줄 수 있다. 이렇게 브라우저 주소에 따라 다른 페이지를 보여주는 걸 라우팅이라고 부른다.

2-1. 전부 직접 구현하나?

이미 만들어진 라우팅 라이브러리가 있다. 우리는 리액트 사용자들이 가장 많이 쓰는 라우팅 라이브러리를 가져와서 사용해 볼 것이다.