[💻 코드스테이츠 FE 44기] React SPA

✔️ 시작

React SPA가 도입된 배경과 어떻게 진행되는지 학습했다.

---

📍알게된 것

✔️ SPA(Single Page Application)

등장 배경

• 예전 웹 사이트는 페이지 이동 시 페이지 전체를 불러 와야했다.
  점점 증가되는 데이터 등으로 인해 트래픽 증가와 사용자 경험의 저하가 생기게 되었고 이로 인해 SPA가 등장하게 되었다.(페이지 전체를 불러오는 행위 : 깜빡인다.)

SPA 등장

• HTML 문서 전체가 아닌 업데이트 시 필요한 영역만 데이터를 받아 그 정보를 기준으로 해당 페이지를 업데이트한다.

- 장점

• 사용자와의 인터렉션(Interaction)가 빠르게 반응한다.
• 서버 과부하 문제가 줄어든다.
• 전체 페이지를 렌더링할 필요가 없이게 더 나은 유저 경험을 제공한다.

Youtube, facebook, Gmail 등 ➤ SPA로 만들었다.

장점이 있다면 단점도 존재한다.

- 단점

• Javascript 파일이 크다.
  - 대부분의 코드가 Javacsript내부에 있기 때문에 Javascript 기다리는 시간으로 첫 화면 로딩시간이 길어진다.
• 검색 엔진 최적화에 좋지 않다.
  - 대부분의 코드가 Javascript에 있기 때문에 HTML 파일 내부에는 별다른 정보가 없다.

✔️ 라우팅(Routing)

• 다른 주소에 따라 다른 화면을 보여주는 과정 (경로에 따라 변경)
• 라우팅하기 위해서는 React Router 라이브러리를 설치해야한다.

- Router 컴포넌트 설치/ 불러오기

설치하기

1.React App 설치

npx create-react-app 파일명

2. npm install react-router-dom@버전

npm install react-router-dom@6.3.0

불러오기

• import : 필요한 모듈을 불러오는 역할로 비구조화 할당(destructuring assignment)와 비슷하게 사용 가능

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

실행화면 보기

npm run start

- 주요 컴포넌트

• <Browser Router> : 라우터 역할(전체를 감싸고 있어야한다.)
• <Routes> : 여러 Route를 감싸고 경로가 일치하면 렌더링 한다. (경로를 매칭)
• <Route> : path속성을 지정해 path에서 어떤 컴포넌트를 보여줄지 정한다.
  - 경로 : path로 연결
  - 컴포넌트 : element로 연결
• <Link> : 페이지 전환을 방지하기위해 to속성을 활용해 Route에 설정한 path 주소에 연결한다.

function App(){
	return(
    	<BrowserRouter>
        	<div>
              <nav>
              	<ul>
                	<li>
                     	 {/* Link 컴포넌트 이용해 경로 연결 */}
                  		<Link to="/">Home</Link>
                  	</li>
                  	<li>
                  		<Link to="/about">About</Link>
                  	</li>
                </ul>
              </nav>
              <Routes>
                <Route path="/" element={<Home />} /> 
                {/* 경로는 path로, 컴포넌트는 element로 연결 */}
                <Route path="/about" element={<About />} /> 
              </Routes>
			</div>
        </BrowserRouter>
    )
}

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

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

export default App;

✔️ useNavigate 이용한 뒤로가기

• useNavigate: 양식이 제출되거나 특정 event가 발생할 때 url을 조작할 수 있는 인터페이스를 제공

{/*useNavigate 불러오기*/}
import { useNavigate } from 'react-router-dom';

function App(){
  {/*변수 할당*/}
  const navigate = useNavigate();
  const backBtn = () => {
    navigate(-1)
  }
return (
	<Link onClick={backBtn}>Back</Link>
	<button onClick={backBtn}>Back</button>
)

}
export default App;

useNavigate(-1) 뒤로가기
useNavigate(1) 앞으로가기

---

✏️ 마치며

Router 라이브러리를 이용해 SPA를 구현할 수 있는 시간이였다.
아직은 미숙하지만 React가 어떤식으로 작동되는지의 구조를 다시 한 번 파악할 수 있는 시간이였다.