리액트 SPA 라우터

SPA

화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는

웹 애플리케이션이나 웹 사이트.

애플리케이션과 사용자 사이에 수시로 상호작용이 발생하는데, 이때 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 업데이트하기 때문에 SPA는 사용자의 행동에 빠르게 반응 대표적인 서비스는 유튜브,넷플릭스, 페북 등등 

 

단점 

첫화면 로딩시간이 느리다.

검색 엔진 최적화(SEO)가 좋지 않음. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못한다.

SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전하고 있어서, 점차 이 단점은 사라지고 있는 추세

 

SPA & Routing

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않는다.

다양한 화면에 따라 주소도 달라지는데

다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing) 이라고 함 

근데 리액트 자체에 기능이 내장되어 있지 않음 

React Router라는 라이브러리를 사용해야함 

React Router의 주요 컴포넌트는 크게 3가지로 나눌 수 있다.

라우터 역할을 하는 BrowserRouter,

경로를 매칭해주는 Routes 와 Route,

그리고 경로를 변경하는 역할을 하는 Link

import {BrowserRouter,Routes,Route,Link} from "react-router-dom"

BrowserRouter

웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다.

또한 <BrowserRouter> 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있다.

 

Routes 와 Route

<Routes> 컴포넌트는 여러 <Route> 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜준다.

<Routes> 를 사용하지 않으면 매칭되는 모든 요소를 렌더링한다.

<Route> 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정한다. 

<Link> 컴포넌트가 정해주는 URL 경로와 일치하는 경우에만 작동.

<Routes>
  <Route path="/" element={<Home />} /> 
  <Route path="/mypage" element={<MyPage />} /> 
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

이런식으로 작성함 

Link

<a>는 페이지를 전환하는 중간 페이지를 불러와서 새로고침 현상이 일어나는 반면

<Link>는 페이지 전환을 방지하는 기능이 내장되어 있음 

<Link> 의 to 속성을 활용하여 <Route> 컴포넌트에 설정해 준 path 주소를 연결해 준다.

<Link to="/">Home</Link> // 이런식으로 가능