[코드스테이츠/28DAY] S2U5

🐹 TIL/Daily

[코드스테이츠/28DAY] S2U5 - [React] React SPA

드림오구 2023. 3. 23. 14:22

🌊 TIL : 2023년 3월 23일

SPA

SPA의 등장 배경과 개념

: 전통적인 웹사이트에서는 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 HTML파일로 된 페이지 전체를 불러와야 했다. SPA는 Menu와 Footer와 같이 페이지 전환 전후에 중복되는 부분은 새로 불러오지 않는다. 중복 되는 부분을 계속해서 불러오는 것은 서버와의 불필요한 트래픽을 야기하여 더 느린 반응성을 갖게 되고, 1990년대 후반에 업데이트에 필요한 데이터만 서버에 전달받아 이 데이터를 JS가 동적으로 HTML요소를 생성해서 화면에 보여주는 방식이 개발되어 사용되기 시작했다. 2000년대 중반부터는 이러한 개발 방식을 이용한 웹어플리케이션이 보편화 되었고, 이것이 싱글 페이지 어플리케이션, SPA이다.

즉, SPA는 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹어플리케이션이나 웹사이트.

SPA의 장점

낮은 과부하
보다 나은 사용자 경험

대표적인 SPA 서비스

Youtube
facebook
Gmail
airbnb
Netflix

SPA의 단점

첫 화면 로딩시 대부분의 코드가 JS파일 안에 있기 때문에 JS파일이 무거워진다.
첫 화면 로딩 시간이 길어진다.
검색 엔진 최적화(SEO)에 좋지 않다.
→ 단, SPA에서도 검색 엔진 최적화에 대응할 수 있도록 검색 엔진이 발전 중이라 이 단점은 사라지는 중!

SPA Routing

: 다른 주소에 따라 다른 뷰를 보여주는 과정을 "경로에 따라 변경한다." 라는 의미로 라우팅(Routing)이라고 한다. React 자체에는 이 기능이 없고 React SPA에서는 라우팅을 위해 React Router라는 라이브러리를 많이 사용한다.

React Roter 설치

: npm install react-router-dom

React Router의 주요 컴포넌트

사용법 : import { BroswerRouter, Routes, Route, Link} from "react-router-dom";

<Browser Router> - 라우터 역할

가장 상위에 작성되어야 한다.

<BrowserRouter>
//index.js 를 감싸거나 App.js App() 가장 밖을 감싼다.
</BroswerRouter>

<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 />} />
  // 경로와 만들어둔 컴포넌트를 element = {컴포넌트} 연결한다.
</Routes>

<Link> - 경로 변경

새로운 페이지를 불러내지 않고 어플리케이션을 유지한 채 페이지 주소만 변경해준다.

<li>
  <Link to="/">Home</Link>
</li>
<li>
  <Link to="/mypage">MyPage</Link>
</li>

<li>
  <Link to="/dashboard">Dashboard</Link>
</li>

티스토리