React에서 Router를 사용하는 이유?

서론

React를 사용하면서 페이지 이동에 <a href=''>가 아닌 Router를 사용해야하는 이유가 궁금해졌다.

---

SPA란?

React에서 Router를 사용하는 이유를 알기 위해선 먼저 SPA를 이해해야한다. SPA에 대한 이전 글 참고 

SPA(Single Page Application)는 말 그대로 한개의 페이지로 이루어진 어플리케이션이라는 의미이다.

SPA가 등장하기 전 웹 애플리케이션을 구성하던 방식인 서버 사이드 렌더링(SSR)방식의 경우, 화면에 보여질 리소스를 서버로 요청하고, 서버로 부터 받아온 리소스를 렌더링 했다. <a href=''>를 통한 이동이 가능하다.

하지만, SPA의 경우 렌더링의 역할을 서버가 아니라 브라우저에서 처리하는 방식이다.  

 

SSR / 출처 : https://velog.io/@daybreak/React-SPA-Router

 

 

요즘은 웹에서 제공되는 정보가 많기 때문에 새로운 화면을 보여 주어야 할 때 마다 서버측에서 모든 뷰를 준비한다면 성능상의 문제가 발생할 수 있다. 따라서 이러한 방식은 비효율적이다.

 

그래서 대표적인 라이브러리/프레임워크 React, Vue/Angular를 사용하여 View 렌더링을 사용자의 브라우저가 담당하도록 하고, 인터렉션이 발생하면 필요한 부분만 자바스크립트(JavaScript)를 사용하여 업데이트 해준다. 만약 새로운 데이터가 필요하다면 서버 API를 호출하여 필요한 데이터만 새로 불러와 사용할 수 있다.

 

SPA / 출처 : https://velog.io/@daybreak/React-SPA-Router

---

 

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

https://reimaginer.tistory.com/entry/spa-and-spa-routing

SPA와 SPA 라우팅 원리