[Section 2] React SPA

React SPA

SPA등장 이전에는 브라우저가 페이지를 보여주기 위해서는 페이지 전체를 불러와야 했다. -> Header나Navgation Bar같은 중복요소들의 불필요한 트래픽 문제 발생

업데이트에 필요한 데이터만 서버에서 전달받는 싱글 페이지 애플리케이션 SPA(업데이트 방식)

Wireframe

디자인 전에 선(wire)을 이용해 윤곽선(frame)을 잡는 것

---

라우팅

화면에 따라 주소가 달라지므로 경로에 따라 변경한다는 의미로 라우팅(Routing)이라고 한다.
--> React Router라는 라이브러리를 가장 많이 사용한다.

라우터를 사용하면 브라우저에서는 다른페이지로 이동했다고 생각하지 않음 --> 싱글페이지 어플리케이션

React Router 주요 컴포넌트

React Router Dom 라이브러리가 경로마다 필요한 컴포넌트를 렌더링하는데 도움을 준다.

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

• Browser Router: History APi를 사용해 UI를 URL과 동기화된 상태로 유지하는 역할

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

• Routes: Route로 생성된 자식 컴포넌트 중에 매칭되는 첫번재 Route를 렌더링하는 역할

• Route: 경로를 지정해주는 역할

<Route path = '/mypage' element={<MyPage />}<route> //Route는    + . mypage URL로 이동, 렌더링

<Route>컴포넌트는 path속성을 지정하여 어떤 컴포넌트를 보여줄지 정한다. <Link>컴포넌트가 정한 URL경로와 일치한 경우 작동한다.

• Link: 사용자를 원하는 경로로 이동시켜 주는 역할

Link to 는 클릭할때 URL 을 변경시켜준다.
ex) loclahost:3000/mypage