[React] SPA

1.SPA(Single-Page Application) 개념을 이해하고 설명할 수 있다.
2.SPA의 장, 단점에 대해 이해하고 설명할 수 있다.
3.와이어프레임을 보고 어느 부분을 컴포넌트로 구분할지 스스로 정할 수 있다.
Chapter2. React Router
4.React에서 npm으로 React Router를 설치(npm install react-router-dom@^6)하고 이용할 수 있다.
5.React Router를 이용하여 SPA를 구현할 수 있다.
6.라우팅 구조를 짤 수 있어야 하고, 이에 필요한 기초 문법들을 사용할 수 있어야 한다.

1. SPA는 이름처럼 하나의 페이지에 적용되는 시스템으로 모든 페이지를 수정하지 않고 변경해서 보여줘야 하는 부분만 변경하는 방식이다.

2. SPA는 기존의 여러 페이지와는 다르게 하나의 페이지에서 시행되기 때문에 불필요한 정보를 로딩할 필요가 없기 때문에 실행 속도가 빠르고 유저의 데이터 낭비를 줄일 수 있습니다. 또한 구조적으로 합처진 상태이기 때문에 내용의 추가나 삭제를 할 경우에도 내부 이름들의 충돌등을 걱정하지 않고도 수입해서 편하게 사용할 수 있다.

3.와이어프레임에서 기초적인 메뉴바 또는 하단을 제외한 대부분(가끔은 사이드바도 남길 수 있다.)의 기능들은 컴포넌트로 작성해야하고 사실 다른 부분들도 컴포넌트로 제작한 후 불러오는 것이 좋다. 사실 컴포넌트로 구분한다기 보다는 라우터로 구분하는 부분이 중요하며 고정해서 나오는 부분이라도 수정할 경우를 위해서 컴포넌트로 작성하는 것이 나쁘지 않다.

4.npm install react-router-dom@^6을 작성한 후 import로 { BrowserRouter, Routes, Route} from 'react-router-dom'; 등을 작성해 주고 내용물을 <BrowserRouter>로 감싸주고  <Routes>로 분기를 설정한 후 내부 내용을 <Route path="/" element={<Tweets />} /> (import Tweets from './Pages/Tweets';등으로 수입해줘야한다.) 주소, 페이지위치등을 지정해주면 그 페이지로 이동하는 분기점? 경로?가 생긴다. 

5.가능하다.

6.기초적인 Routes, Route를 사용할 수 있다.


SPA를 이용한 route는 상당히 흥미로운 방식이었다.
길을 나누는 방식들도 합리적이고 명확하게 표현된 것 같다.
아무래도 최신식으로 추가된 문법일수록 기능적으로 우수하고 사용하기 좋은 것 같다.