서론
React를 사용하면서 페이지 이동에 <a href=''>가 아닌 Router를 사용해야하는 이유가 궁금해졌다.
SPA란?
React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고
SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다.
SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. <a href=''>를 통한 이동이 가능하다.
하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다.
요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 따라서 이러한 방식은 비효율적이다.
그래서 대표적인 라이브러리/프레임워크 React, Vue/Angular를 사용하여 View 렌더링을 사용자의 브라우저가 담당하도록 하고, 인터렉션이 발생하면 필요한 부분만 자바스크립트(JavaScript)를 사용하여 업데이트 해준다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 사용할 수 있다.
Router
CRA(creat-react-app)에는 기본적으로 Routing을 위한 로직이 들어있지 않기 때문에 react-router를 추가해서 구현한다.
routing(다른 주소에 다른 화면을 보여주는것)을 하기위해 필요하다.
React에서 <a>tag 사용이 안되는 이유
위에서 설명한 내용대로, React는 SPA이다. CRA(creat-react-app)를 통해 리엑트 파일을 생성하고 살펴보면 결국
< index.html > 이라는 하나의 html에 서로 다른 컴포넌트들을 화면에 보여주는것을 알 수 있다.
따라서 SPA에서는 다른 html을 보여주는것이 아니기 때문에 다른 주소에 다른 화면을 보여주는 routing 방식으로 페이지 이동을 해야한다. 그러기 위해서는 <a>tag의 사용이 아닌, Router의 기능이 필요하다.
참고 자료
https://velog.io/@daybreak/React-SPA-Router
[React] SPA , Router
SPA(Single Page Application)는 말 그대로 한 개의 페이지로 이루어진 어플리케이션이라는 의미이다. 전통적인 웹 페이지는 다음과 같이 구성되어 있다. 기존에는 사용자가 다른 페이지로 이동할 때마
velog.io
https://reimaginer.tistory.com/entry/spa-and-spa-routing
SPA와 SPA 라우팅 원리
SPA와 SPA 라우팅 원리 이번 포스팅에서 웹서비스가 Single Page Application(이하 SPA)까지 발전하게 된 경위와 SPA의 라우팅의 원리에 대해서 알아보려고 합니다. 스펙을 일일이 참고해서 작성하지 못하
www.reimaginer.me