[React] React SPA/ React Router

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

 

🦍React SPA

---

SPA는 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라,
화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말합니다.

예를 들어 유튜브에 들어가서 새로고침을 하면 다음 화면이 잠깐 보인다

회색으로 보이는 영상 부분이 아직 로드가 안되었기 때문이다.

이러한 SPA는 어떤 장점이 있을까?

🐒[장점]사용자와의 상호작용에 빠르다.

전체 페이지가 아니라 필요한부분의 데이터만 반아서 화면을 업데이트 하면 되기 때문에 사용자와의 상호작용에 빠르다.

페이스북 사용자가 게시글에 좋아요를 누르면 다른 컴포넌트에는 어떠한 영향도 주지 않고, 좋아요 버튼만 수정이 들어간다.

🐒[장점]서버 과부하 문제가 줄어든다

서버는 전체 데이터가 아닌 요청받은 데이터만 넘겨주면 되기 때문에 과부화 문제가 현저하게 줄어든다

🐒[장점]더 나은 유저 경험

아까 유튜브 사진 처럼 일부 컴토넌트와 유튜브 영상 자리가 로드전에 회색으로 보이는 등이 없다면 사용자에게 회면이 그냥 흰새으로 보이게 되고, 사용자에게 화면이 끊겨 보이는 느낌을 주며 유저 경험이 나빠진다.

 

단점은 무엇이 있을까?

🐒[단점]로딩시간

SPA의 경우 Javascript의 파일 크기가 크기 때문에 처 로딩 시간이 길어진다.

🐒[단점]검색 엔진 최적화가 좋지 않다

검색 로봇은 자료를 수집할 때에 웹 페이지의 URL은 물론이고 HTML 문서 내의 각종 태그나 링크 등을 분석합니다. SPA는 HTML이 거의 비어있다 보니 검색 로봇이 충분한 자료를 수집하지 못합니다.
이 때문에 검색 노출이 중요한 웹 애플리케이션은 검색 엔진 최적화에 대한 대응책을 따로 마련해야 하고, 더불어 앱 안에서 브라우저의 앞으로 가기/뒤로 가기 등의 상태 관리도 해야 하기 때문에 개발의 복잡도가 더욱 늘어납니다.

사실 무슨 말인지 잘 모르겠다
검색 엔진이 발전하고 있어서 이러한 단점이 사라지는 추세라니 중요하게 보지 않아도 될것 같다 :)

🦍Wireframe

---

Wireframe은 디자인에 들어가기 전 단계로 선(wire)를 이용해 윤곽선(frame)을 잡는 것을 말합니다. 이 작업을 통해 개발자는 디자인 컨셉과 사이트 기능에 대한 이해를 할 수 있습니다. 그리고 목업(mockup)은 데스크톱, 스마트폰의 프레임을 덧씌워 직관적으로 이해하기 쉽게 디자인한 것을 말합니다.

 

🦍React Router

SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면만 사용하지 않습니다.
인스타 그램을 예로 들어보겠습니다

게시물 릴스 태그됨 부분을 누르면 화면은 그대로이지만 게시물을 보이는 컴토넌트가 변하는것을 알수 있습니다.
하나의 페이지를 가지고 있지만 게시문, 릴스, 태그됨 세가지 동류의 화면을 사용하고 있습니다.

 

url을 확인해 보겠습니다.
게시물로 들어가 있는 화면에서는 https://www.instagram.com/zanmang_loopy/
릴스로 들어가 있는 화면에서는 https://www.instagram.com/zanmang_loopy/reels/
태그됨으로 들어가 있는 화면에서는 https://www.instagram.com/zanmang_loopy/tagged/

이렇게 다른 주소에 따라 다른 뷰를 보여주는 과정을 라우팅이라 합니다.

 

React 자체에는 이 기능이 내장되 있지 않기 떄문에 우리가 직접 주소마다 다른 뷰를 보여줘야합니다 :(

React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 가장 많이 사용합니다.

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

 

Routes는 다른 글에는 Switch로 쓰여 있다.
React Route v5일때 작성된 글이기 때문이다. 같은 작동을 하는데 이름이 달라졌다.
v5와 달라진 v6에 대한 내용은 아래 글에 정리되어 있다

https://blog.woolta.com/categories/1/posts/211

 

다시 돌아와서 각각의 역할에 대해 말해보면
라우터 역할을 하는 BrowserRouter
경로를 매칭해주는 Routes 와 Route
그리고 경로를 변경하는 역할을 하는 Link

다음을 사용하려면 react-router-dom를 설치해야한다.

 

npm install react-router-dom@^6.3.0
#최신버전은 모르지만 나는 6.3.0버전을 사용할 예정이다!

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

 

라우터를 사용하고 싶은 슬라이드에서 import를 해서 사용합니다.

🐒React Router 예제

import './App.css';
import {BrowserRouter,Routes,Route, Link} from "react-router-dom";

function App() {
    return (
        <div id = "main">
            <BrowserRouter>
                <h1>Router Test</h1>
                <hr/>
                <div>
                    <button><Link to="/">Home</Link></button>
                    <button><Link to="/about">About</Link></button>
                    <button><Link to="/etc">Etc</Link></button>
                </div>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/etc" element={<Etc />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
function Home() {
    return <h1>Home</h1>;
}

function About() {
    return <h1>About</h1>;
}

function Etc() {
    return <h1>Etc</h1>;
}
export default App;