230119 React SPA와 라우터 설치 및 시작

SPA(Single Page Application)

하나의 페이지로 만들어진 어플리케이션을 의미한다.

SPA는 html파일을 브라우저 측에서 로드하고, 필요한 데이터는 API와 ajax통신을 처리한다.
브라우저에서 사용자가 상호작용하면 필요한 부분만 업데이트해서 처리한다.
멀티플랫폼, Android, IOS에 대응하여 웹뷰로 처리하는 목적으로도 사용된다.
전통적인 방법보다 좀더 동적으로 보인다는 효과가 있다. (요즘은 기존 방식으로도 비슷한 효과를 낼 수 있다.)

SPA의 단점
앱의 규모가 커지면, JS파일도 너무 커져서 로딩이 오래 걸리게 된다.
브라우저에서 렌더링이 완료되기까지 비어있는 화면이 나오게 된다.
그래서 규모가 큰 어플리케이션은 SSR(서버사이드 렌더링) 방식으로 처리한다.(웹팩 설정 필요)

클라이언트사이드 렌더링(CSR)->SSR로 바꾸는 것이 좋은데, 그 과정이 굉장히 복잡하다.

 

---

SSR과 비슷하게 하는 방법

라우팅

-브라우저의 주소상태에 따라 다양한 화면을 보여주도록 처리하는 것

라우팅 사용 이유
1.create-react-app으로 프로젝트를 생성하게 되면 기본적으로 SPA에 CSR방식이다.
2.하나의 페이지만 사용하게 되는 것.
3.SPA이지만 라우터를 활용해서 사용자로 하여금 여러 페이지가 존재하는 것처럼 느껴지게 할 수 있음



사용방법
1.라우터를 적용할 프로젝트 생성 npm create react-app 프로젝트명(react-router로 생성하였음)
2.라우터 설치 npm add react-router-dom
3.프로젝트 시작 npm start

터미널에서 cd.. =>경로에서 한단계 위로

router를 설치하면 package.json에 추가된 걸 확인할 수 있다.



적용방법
1.라우터를 사용할때는 index.js에서 App컴포넌트를 <BrowserRouter>로 감싸준다.
2.페이지 컴포넌트 만들기 
3.App컴포넌트에서 <Routes>를 사용해서 분기하기

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/user" element={<User/>} />
  <Route path="/info" element={<Info />} />
</Routes>

화면의 분리. path가 " / "면 Home으로 이동한다.
->처음 화면이 켜졌을 때 기본경로가 Home이다. 켜진 화면의 경로 뒤에 /가 붙을수도 안붙을수도 있다.
해당 경로를 입력하면 그 페이지로 이동한다.
여러개도 가능하고, 이중주소도 가능. 주소가 겹치지만 않으면 된다.

4.주소요청을 통해 확인하기
->주소별로 컴포넌트 연결 가능. element에 넣는다.

---

Link를 이용해서 다른페이지로 이동하기
-link태그는 화면에서 a태그로 생성된다. 개발자도구에서 보면 a태그로 만들어져 있음
-to속성에는 연결할 요청주소(라우터 주소)를 적는다. 문자열도, {}도 가능
-어느 컴포넌트든 사용할 수 있다.

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

const Home = () => {
    return (
        <div>
            <h3>홈페이지</h3>

            <ul>
                <li><Link to="/user">회원페이지</Link></li>
                <li><Link to="/info">info페이지</Link></li>
            </ul>
        </div>
    )
}

export default Home;

---

vscode에서 초록색으로 뜨는 Fragment, Routes, Route, Link 등등의 태그는 리액터나 라우터가 제공하는 태그들. 따라서 import를 해줘야한다.