SPA 등장

등장 배경

• 비교적 옛날 웹페이지에서는 페이지를 로딩할 때마다 서버에 페이지를 전달 받아와서 렌더링을 했다.
  하지만, 규모가 커질수록 사용자와의 상호 작용이 많아지고 그에 따라 아래와 같은 문제가 발생했다.

  • 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러와야만 했다. -> 깜빡임 발생
  • Header나 Navigation Bar Fotter Menu 등과 같이 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰습니다.
  • 사용자 입장에서는 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었고, 이는 애플리케이션과 같은 사용자 경험을 제공하기 어렵게 만들었습니다.
    

이제는 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작하였다.
이것이 Single page application(SPA)이다.

장점 단점

• 장점

  1. 전체페이지가 아니라 필요한 부분의 데이터만 받아서 화면을 업데이트 하면 되기 때문에 사용자와의 interaction에 빠르게 반응한다.
  2. 서버에서는 요청받은 데이터만 넘겨주면 되기 때문에 서버 과부하 문제가 줄어든다.
  3. 전체페이지를 재 랜더링하지않아 깜빡임이 없기 때문에 더 나은 유저경험을 제공한다.

• 단점

  1. spa를 구현하기위해선 javascript파일을 html파일을 읽은뒤 다운받게되는데 용량이 크기때문에 첫 페이지 로딩시 로딩시간이 길어진다.
  2. 검색엔진 최적화(SEO) 가 좋지 않다. 검색엔진은 HTML파일에 자료를 분석하는 방식으로 구동되는데 spa는 HTML을 최소화 했기 때문에 검색엔진을 활용하기에 적절하지 않다. -> 검색엔진이 이러한 상황에 맞게 발전하고 있어서 이 단점은 사라지고있다.

React Router

Route
(한 곳에서 다른 곳으로 가기 위해 따라가는) 길[경로/루트]
(특정한 루트를 따라 무엇을) 보내다[전송하다]

등장 배경

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

• 에를들어 Twittler와 같은 SPA를 만들 때, 메인 트윗 모음 페이지, 트윗 작성페이지, 나의 정보 페이지 등의 화면이 필요할 수 있다.

• 따라서 이 화면에 따라 나타내는 "주소"도 달라지게된다. 이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다."라는 의미로 라우팅(Routing)이라고 한다.

  • URL에 따라서 그에 상응하는 화면을 전송해주는 것을 Routing이라고 한다

• React는 자체적으로 이기능을 지원하지 않는다 직접다른 뷰를 보여주거나 외부 라이브러리를 이용하는데 React SPA를 구현하기위해서 React Router가 대표적으로 쓰인다.

• 즉 React Router는 React의 강점인 SPA application을 잘 활용하기 위해서 주소에따라 관련된 컴포넌트들을 랜더링 시키기 위해 사용하는 라이브러리이다.

Routing이 필요한 이유? (URL로 페이지를 나누지않고 완전한 SPA로 구현할시)

• 특정 페이지 즐겨찾기 등록불가, 화면이 전환되어도 브라우저 주소창의 url은 고정되어 있기 때문이다.

• 뒤로 가기 버튼을 누르면 해당 앱 내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버린다. (SPA이기 때문)

• 새로고침 버튼을 누르면 사용중이던 컴포넌트가 아닌 최초에 렌더링 되었던 사이트 메인으로 이동한다.

• seo(검색 엔진 최적화) 측면에서도 일반 웹사이트들과 차이가 있어서 검색 엔진에 의해 원치않는 방식으로 색인이 될 수 있음.

• 현재 URL에 맞는 UI(즉, 컴포넌트)를 렌더링 할 수 있어야 한다.

• 페이지의 리로드 없이 다른 페이지를 방문할 수 있는 내비게이션 기능이 있어야 한다

  • Router기능이 없으면 한페이지에서 계속 지우고 새로 랜더링 해야하기 때문

• 사용자의 액션(앞으로 가기, 뒤로 가기 등)에 의해 URL이 변경될 때 이를 감지하고 처리할 수 있어야 한다.

• a태그는 깜빡임이 있으므로 Route 컴포넌트를 이용

설치 방법

React가 있는 폴더에서 npm으로 React Router를 설치(npm install react-router-dom@^6.3.0)

React Router 주요 컴포넌트 : BrowserRouter, Routes, Route, Link

해당 기능을 사용하려면 React Router 라이브러리에서 따로 불러와야 한다.

// 사용하려는 파일 상위에 작성
import {BrowserRouter, Routes, Link, ...} from "react-router-dom";

• BrowserRouter 컴포넌트는 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있게 해준다. 가장 상위에 작성되어야 다른 컴포넌트들을 사용이 가능하다

// App.js의 return문에 작성하는게 정석이지만 보통 App 클래스를 랜더링하는 상위 React Router DOM에 작성함
ReactDOM.render( <BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))

• 경로를 변경하는 역할 : Link 컴포넌트는 해당 컴포넌트를 클릭할 때, Route의 path와 일치하는 페이지로 이동할 수 있게 해주는 컴포넌트입니다. 페이지 전환을 통해 페이지를 새로 불러오지 않고 애플리케이션을 그대로 유지하여 HTML5 History API를 이용해 페이지의 주소만 변경해 줍니다

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

• Route 컴포넌트는 path 속성을 지정하여 Link 컴포넌트가 지정하는 to 속성과 일치했을때 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다.

<Link to="/">
   <i className="far fa-comment-dots"></i>
   </Link>

   <Link to="/test">
     <i className="far fa-question-circle"></i>
   </Link>

  <Link to="/mypage">
    <i className="far fa-user"></i>
</Link>

 <Routes>
  <Route path="/" element={<Tweets />} ></Route>
  <Route path="/about" element={<About />}></Route>
  <Route path="/mypage" element={<MyPage></MyPage>}></Route>
  <Route path="*" element={<Tweets />} ></Route>
</Routes>

• Link에는 클릭 이벤트가 내장되어 있고 Route와 상호작용한다. 이때 Route의 path와 일치하는게 없다면 빈화면이 뜨지만 Route에서 path="*"를 준다면 일치를 시킬수 있다.

• ReactDOM으로 렌더를 시키게 되면 Link컴포넌트는 a요소로 바뀌는 모습을 볼 수 있습니다.
  a요소는 페이지를 전환하는 과정에서 페이지를 불러오기 때문에 다시 처음부터 렌더링을 시키지만 (새로고침 현상) Link컴포넌트는 페이지 전환을 방지하는 기능이 내장되어 있기 때문에 SPA를 구현할 수 있다.