React - Routing

❶ SPA(Single Page Application)란?

SPA는 서버에서 전체 새 페이지를 로드하는 대신 사용자가 상호 작용할 때 콘텐츠를 동적으로 업데이트합니다.
이는 브라우저가 웹 페이지의 필요한 부분만 업데이트하고 전체 페이지를 새로고침하는 것을 방지하므로 더 매끄럽고 반응이 빠른 사용자 경험으로 이어집니다.

SPA의 장점은 다음과 같습니다.

1. 개선된 사용자 경험
SPA는 기본 애플리케이션과 유사한 유동적이고 응답성이 뛰어난 경험을 제공합니다.

2. 서버 로드 감소
SPA는 대부분의 처리를 클라이언트 측으로 오프로드하여 서버 로드 및 대역폭 사용을 줄입니다.

3. 간소화된 개발
SPA는 프론트엔드와 백엔드를 분리하여 각 부분의 개발 및 배포가 더 쉬워집니다.

---

❸ CSR 라우팅(react-router-dom 소개)

클라이언트 측 렌더링(CSR)은 브라우저가 JavaScript를 사용하여 웹 페이지 콘텐츠를 렌더링하는 기술입니다.
CSR 라우팅에서 라우팅 로직은 클라이언트 측에서 처리됩니다.
즉, 브라우저가 URL을 업데이트하고 서버에 추가 요청을 하지 않고 콘텐츠를 렌더링합니다.

❓ react-router-dom 이란?

react-router-dom은 React에서 CSR 라우팅을 관리하는 데 사용되는 라이브러리입니다.

react-router-dom을 설정하는 방법은 다음과 같습니다.

1. react-router-dom 설치

npm install react-router-dom

2. BrowserRouter, Route을 사용하여 경로를 만듭니다.

// App.tsx
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';

const App = () => (
  <Routes>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route component={NotFound} />
  </Routes>
);

export default App;

---

❹ SSR 라우팅(Next.js 소개)

SSR(Server-Side Rendering)은 서버가 각 경로에 대한 HTML 콘텐츠를 생성하여 렌더링된 페이지를 클라이언트로 보내는 기술입니다.
SSR은 서버가 완전히 렌더링된 HTML을 클라이언트에 전송하므로 애플리케이션의 초기 로드 시간과 SEO를 개선할 수 있습니다.

❓ Next.js 란?

Next.js는 SSR으로 React를 구축하기 위한 프레임워크입니다.

Next.js를 시작하는 방법은 다음과 같습니다.

1. Next.js, React 및 ReactDOM 설치

npm install next react react-dom

2. 다음 스크립트를 사용하여 package.json 파일을 업데이트합니다.

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

3. 프로젝트의 루트 폴더에 pages 디렉터리를 만들고 그 안에 React 구성 요소를 추가합니다. (Next.js는 파일 구조를 기반으로 자동으로 경로를 생성합니다.)

// page/index.js
import React from 'react';

const Home = () => (
  <div>
    <h1>Welcome to the Home page</h1>
  </div>
);

export default Home;

4. 다음 명령을 사용하여 개발 서버를 실행합니다.

npm run dev

5. 브라우저를 열고 http://localhost:3000 에서 작동 중인 Next.js 애플리케이션을 확인합니다.