[React] SPA, 라우팅

🥕 SPA

Single Page Application (싱글 페이지 어플리케이션) 의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다.
SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.
주로 React-router에서 Routing시에 필수적으로 사용되는 기능입니다.

🥕 과거의 웹 사이트

전통적인 웹 사이트는 지금보다 문서 하나에 전달되는 파일의 용량이 적었습니다. 그래서 어떤 요소를 한번 클릭하면 완전히 새로운 페이지를 서버에서 전송해 주곤 했습니다. 그래도 상관 없었지만 현대에 이르러 점차 웹 사이트가 고도화됨에 따라 한 페이지에 해당하는 페이지 용량이 커져갔고, 매번 새로운 페이지를 전달하는 게 점점 버거워지게 되었습니다.

이러한 문제를 해결하기 위해 등장한 것이 SPA(Single Page Application)입니다. 이름에서도 파악할 수 있듯이, 어떤 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것이 SPA입니다. 뭔가를 클릭하거나 스크롤하면, 상호작용하기 위한 최소한의 요소만 변경이 일어납니다. 페이지 변경이 일어난다고 보여지는 것 또한 최초 로드된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것입니다.

🥕 SPA 라우팅

HTML 5의 history api를 이용하기 때문에 기존 전통적인 웹사이트와 바찬가지로 브라우징이 가능합니다. 서버로 요청을 전달하지 않고 자바스크립트 영역에서 history api를 통해 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 하는 것입니다.

🥕 라우팅

사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것입니다. 리액트에서 많은 라우터 중 가장 많이 쓰이는 것은 리액트 라우터(React Router)입니다.
React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있습니다.