Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 마무리
- Hook
- Netflix
- CSS
- TiMER
- 클론코딩
- Nicolas
- vanilla js
- Project
- expo
- react
- 자바스크립트
- Nomad
- 느낀 점
- react-native
- coding
- scflix
- HTML
- Vanilla
- 바닐라 자바스크립트
- Firebase
- github
- Nomad coder
- react-hook
- javascript
- 프로젝트
- 계획
- Clone
- 코코아톡
- 오류
Archives
- Today
- Total
꾸매코딩
React에서 Router를 사용하는 이유? 본문
반응형
서론
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
https://reimaginer.tistory.com/entry/spa-and-spa-routing
반응형