[React] SPA란? 장점 단점 + React Router사용법

짜잔! SPA는 하나의 페이지를 마치 다른 페이지처럼 변신시킨다.

🔮 SPA(Single Page Application)

 

• 전통적 웹사이트(MPA): Multiple Page Application, 웹사이트에 다른 페이지로 이동하면  매번 HTML 파일로 된 "페이지 전체"를 불러온다. ➡️ 서버와의 불필요한 트래픽 발생  ➡️ 느림 & 페이지가 바뀔때 전체화면이 깜빡거림
• SPA: 페이지가 바뀌어야할 때, 페이지를 실재로 바꾸지 않고 header,nav나 footer같이 중복되는 부분 빼고 업데이트 필요한 데이터만 바꾸어 화면에 보여준다. ➡️ 사실상 페이지 전환없이 유저는 다른 페이지의 컨텐츠를 본다 ➡️ 서버와의 트래픽 과부화 없음 ➡️ 빠름 & 깜빡거리지 않음

 

---

👎🏻 SPA 단점

 

• javaScript 파일의 크기가 큼 ➡️ 파일을 기다리는 시간으로 인해 첫화면 로딩 시간이 길어짐
• 검색 엔진 최적화가 좋지 않다. (현재는 SPA도 대응하도록 검색 엔진이 발전 중)

브라우저는 HTML ➡️ javaScript순으로 파일을 읽는다.

그런데 HTML이 사실상 비어있고, 대부분의 코드가 javaScript에 있다보니, js 파일이 무거워지고 첫화면 로딩 시간이 길어진다.

 

또, 검색 로봇은 url과 html 문서 내의 각종 태그나 링크 등을 분석하는데,

html이 비어있다보니 검색 로봇이 자료 수집을 충분히 하지 못하는 것이다.

---

👀 React Router

 

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

 

React에 자체 기능으로 라우팅을 지원하지 않는다.

그래서! 그것을 하기 위한 라이브러리중 가장 많이 쓰이는 것이 "React Router"!!

 

React Router는 React를 사용할 때 필수적으로 사용하는 라이브러리이다.

---

📥 React Router 설치하기

npm install react-router-dom^6.3.0

버전 확인하기

---

🧷 React Router의 주요 컴포넌트와 불러오기

BrowserRouter	라우터 역할
Routes	경로매칭
Route	경로매칭
Link	경로변경

위의 컴포넌트를 아래의 코드를 통해 불러온다.

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

---

본격적으로 사용하기

 

1. BrowserRouter를 감싸준다.

 

항상 Routes,Route,Link보다 상위에 있어야하므로 보통 App컴포넌트로 리턴되는 문장의 최상위를 감싸준다.

import React from 'react';
import {BrowserRouter, Routes, Route} from "react-router-dom"


const App = (props) => {
  return (
    <BrowserRouter>
    <div className="App">
      <main>
        <Sidebar />
        <section className="features">
        {/* 페이지가 바뀌면서 달라져야 하는 부분 */}
        </section>
      </main>
    </div>
    </BrowserRouter>
  );
};

 

 

2. 페이지가 달라짐에 따라 바뀌는 부분에 Routes태그를 적고 그안에 Route들을 넣는다.

• Routes는 Route를 감싸야 한다.
• <Route path="경로" element={<컴포넌트/>}></Route> ➡️ path로 element의 경로를 연결

import React from 'react';
import {BrowserRouter, Routes, Route} from "react-router-dom"


const App = (props) => {
  return (
    <BrowserRouter>
    <div className="App">
      <main>
        <Sidebar />
        <section className="features">
          {/* 페이지가 바뀜에 따라 달라져야 할 부분에 Routes와 Route를 넣는다. */}
          <Routes>
                <Route path="/" element={<Tweets/>}></Route>
                <Route path="/about" element={<About/>}></Route>
                <Route path="/mypage" element={<MyPage/>}></Route>
          </Routes>
        </section>
      </main>
    </div>
    </BrowserRouter>
  );
};

++ Route의 path로 지정되지 않은 경로로 접근할때 나올 element를 지정해주기 위해선 다음과 같이 할 수 있다.

{/*...*/}
          <Routes>
                <Route path="/" element={<Tweets/>}></Route>
                <Route path="/about" element={<About/>}></Route>
                <Route path="/mypage" element={<MyPage/>}></Route>
                <Route path="*" element={<NotFound/>}></Route>
                {/* <NotFound/>는 "페이지가 존재하지 않습니다."를 띄우는 컴포넌트라고 가정 */}
          </Routes>
{/*...*/}

 

3. 페이지를 달라지게 할 trigger에 Link를 감싸준다.

• to 라는 property에 링크할 페이지 경로(Route의 path value)를 적어준다.
• Link는 랜더링되면서 a태그로 바뀌는 것을 확인 가능하다.
• 실제로 작성할 때도, Link의 to는 a태그의 href와 같다고 생각해도 된다.<a href="/about">About</a> === <Link to="/about">About</Link>
• (실재로 존재하지 않는 페이지를 a 태그처럼 걸어주기위해) Link태그로 쓰면  react router가 a태그로 바꾸어 마치 다른 페이지가 있는 것처럼 작동되게 세팅해주는 것

import React from 'react';
import {Link} from "react-router-dom"

const Sidebar = () => {
  return (
    <section className="sidebar">
      <Link to="/"><i className="far fa-comment-dots"></i></Link>
      <Link to="/about"><i className="far fa-question-circle"></i></Link>
      <Link to="/mypage"><i className="far fa-user"></i></Link>
    </section>
  );
};

export default Sidebar;