S2 unit5 | React SPA (react-route-dom)

📌 SPA(Single Page Aplication)

서버에서 페이지 전체를 받아오는 것이 아니라 페이지 갱신에 필요한 데이터만 받아 자바스크립트를 통해 해당하는 부분만 업데이트하는 방식

 

 

✔ 탄생 배경

MPA(Multi Page Aplication) 방식 =>

사용자와 웹의 상호작용이 많아짐 =>

기존 방식은 불필요한 트래픽이 많아 반응성이 느림, 깜빡이 현상 발생 =>

SPA 방식

 

 

✔ 장점 : 같은 컴포넌트를 여러번 받지 않아도 되어 불필요한 트래픽이 사라짐

 

✔ 단점

(1) HTML은 비어있는 반면, Javascript는 무거워서 첫 화면 로딩시간이 길다.

(2) HTML이 비어있어서 검색엔진이 정보를 수집하기 어렵다.

     따라서 검색엔진 대응책과 브라우저 앞으로 가기, 뒤로 가기 상태관리도 해야하므로 개발 복잡도가 높다.
     하지만 최근에는 검색엔진의 발전으로 이러한 단점이 거의 사라졌다고 할 수 있다.

 

 

SPA가 페이지 갱신을 한다고 해서 하나의 페이지만 사용하는 것은 아니다.

각 화면에 따라 주소를 변경하는데 그걸 라우팅이라고 한다.

 

라우팅(Routing) : 다른 주소에 따라 다른 뷰를 보여주는 것

 

---

📌 React Router

: React에서 라우팅을 위해 사용하는 라이브러리

npm react-router-dom

 

✔ 구성 컴포넌트

🔴 BrowserRouter

: 라우터 역할 (router : 상위 통신망과 하위 통신망을 중계해주는 기기)

history API 사용하여 UI를 URL과 동기화된 상태를 유지해주는 역할

가장 최상단에 위치 => react에서 index.js(자바스크립트 시작점)에 위치하면 편하다

 

🟡 Routes , Route

: 경로 매칭 (route matchers)

사용자가 지정한 주소 외의 주소로 접근할 때 이 속성이 설정되어 있는 컴포넌트를 보여줌

 

🟢 Link

: 경로 변경 (route changers)

a 태그와 비슷하지만

Link 태그는 브라우저의 주소를 이동하고 새로고침을 하지 않는다.

a 태그는 브라우저의 주소를 이동하고 새로고침을 한다.

 

 

사용 방법

위 코드에서 import {BrowserRouter, Routes, Route, Link} from 'react-router-dom' 부분은 구조분해할당을 사용하고 있다.

 

 

 

 

➰ 프레임워크와 라이브러리의 차이

:본래 프레임워크는 여러 기능을 가진 클래스와 라이브러리의 집합인데, 최근에는 라이브러리와 구별이 거의 불가능하다.

react같은 경우에도 프레임워크라고 할 수 있지만 라이브러리라고 발표했기 때문에 라이브러리라고 부르듯이 발표한대로 부른다. SPA 프레임워크 중 하나가 react이기 때문에 둘의 구분은 의미가 없다고 해도 되겠다.