전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동시 브라우저가 페이지를 보여주기 위해 매번 html파일로 된 '페이지 전체'를 불러와야 했다.
이렇게 페이지 전체를 불러오는 행위를 보통 깜빡인다고 표현한다.
웹사이트가 보다 복잡해지고 앱 형태를 띄게 되면서 사용자와 서비스 사이 많은 상호작용이 생겼고 이때마다 중복되는 요소를 불러오는 것은 서버와의 불필요한 트래픽을 발생시켰다.
90년대 후반에 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 자바스크립트가 동적으로 html요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작했다. 00년대 중반부터 이러한 개발 방식을 이용한 웹 어플리케이션이 보편화되었으며, 이것이 우리가 지금 배우고 있는 싱글 페이지 어플리케이션(SPA)이다.
SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 어플리케이션이나 웹 사이트를 말한다.
장점
- 페이지 전체를 렌더링 하는 것이 아니라 사용자의 행동에 빠르게 반응한다
- 서버 입장에서 요청받은 데이터만 넘겨주면 되기 때문에 과부하 문제를 줄일 수 있다.
- 화면 전체를 새로 렌더링할 필요가 없어서 보다 나은 사용자 경험을 제공한다.
단점
- 브라우저는 HTML을 읽고 스크립트에 있는 자바스크립트를 받아오는 과정을 거치는데 대부분의 코드가 자바스크립트 파일 안에 들어있다보니 자연스럽게 자바스크립트 파일이 무거워진다. 이 때문에 첫 화면의 로딩 시간이 길어진다.
- 검색엔진 최적화가 좋지 못하다. 검색엔진은 HTML 파일에 자료를 분석하는 방식으로 검색이 구동되기 때문이다
- 이 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야하기 때문에 개발의 복잡도가 늘어난다. (점차 이 단점은 사라지고 있는 추세)
routing
예를 들어 Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 알림 페이지, 마이 트윗 페이지 등의 화면이 필요할 수 있다.
또한 이 화면에 따라 "주소"도 달라질 것이다.이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.
하지만 React 자체에는 이 기능이 내장되어 있지 않기 때문에 React Router라는 라이브러리를 사용한다.
