오늘의 공부
최초의 웹사이트를 들어가보면 요소를 누를 때 그 주소의 링크로 페이지가 이동된다. Client가 요청을 보내면 서버에서 그 주소에 맞는 HTML을 보내준다.
사용자는 그 HTML 페이지를 깜박거리며 다시 로드한다. 이를 Tranditional Page 또는 MPA(Multiple Page Aplication) 라고 한다.
반면, SPA를 채택한 웹 사이트는 요소를 눌렀을 때, 깜박거리지 않고 바로 로드한다. HTML을 받는 것이 아닌 AJAX 요청을 통해 JSON 데이터를 받기 때문이다.
SPA로 개발된 앱은 필요한 부분만 새로 불러온다. 새로운 부분을 불러올 때 깜박임도 생기지 않는다.
웹 사이트와 앱이 점점 복잡해지면서 처리해야 할 데이터의 양이 많아졌다.
게다가 기존의 방식은 새로운 HTML을 모두 로드하는 것은 불필요한 트래픽을 발생시켰다.
사용자는 그로 인해 낮은 수준의 사용자 경험을 느겼을 것이다.
SPA가 장점만을 지닌 것은 아니다. 페이지를 처음 로딩할 때, JS를 모두 로드해와야 하기 때문에 초기 로딩이 길다.
더불어 SEO(Search Engine Optimization) 검색 엔진 최적화에도 좋지 않다.
검색 엔진은 URL, HTML의 각 요소등에서 데이터를 수집하는데 HTML 요소가 비어있으니 효율이 떨어졌다.
그럼에도 최근엔 사용자들이 사용하는 기기의 성능 향상과 검색 엔진 개량으로 위 단점들이 많이 개선됐다.
React Router
React Router는 경로에 따라 사용자에게 원하는 컴포넌트를 제공한다.
SPA로 웹을 만들 때 Menu, Footer 등 고정적인 컴포넌트를 제외하고 변화시키고 싶은 화면이 있을 것이다.
React Router는 주소에 따른 다른 뷰를 보여준다. 이를 '라우팅' 한다고 한다.
위 GIF를 구현한 코드의 예시이다. React Router를 사용하기 위해선
- 라우터 역할을 하는 BrowserRouter
- 경로를 매칭하는 Routes, Route
- 경로를 지정하는 Link 태그가 필요하다.
마무리
오늘 학습한 SPA와 React Router를 통해 트위터 트윗 목록, 마이페이지, 정보수정 칸을 깜빡임 없이 이동하도록 구현했다.
평소 유튜브 같은 사이트가 어떻게 로딩 없이 컨텐츠를 움직이는지 궁금했는데 그덕에 오늘 배워 구현하는 과정이 더 재밌었다.
사진 출처 WDT
