React와 SPA

React란?

• Facebook에서 개발한 JavaScript 라이브러리로, 복잡한 사용자 인터페이스(UI)를 효율적으로 구축할 수 있도록 설계
• 주로 웹 애플리케이션에서 재사용 가능한 컴포넌트 기반의 UI를 개발할 때 사용

주요 특징

• 컴포넌트 기반 개발
  React는 애플리케이션을 독립적이고 재사용 가능한 컴포넌트들로 나누어 개발
  각 컴포넌트는 자신의 상태(state)와 속성(props)를 가질 수 있으며, 특정 UI 요소나 기능을 담당

로그인 버튼, 회원 가입 버튼, 페이지 제목 등이 각각의 컴포넌트로 정의되고, 이러한 컴포넌트들을 조합하여 하나의 UI를 구성

• Virtual DOM 효율적인 UI 업데이트를 위해 Virtual DOM을 사용
  Virtual DOM은 실제 DOM의 사본으로, 상태가 변경되었을 때 기존 DOM과의 차이점(diffing)을 찾아 변경된 부분만 업데이트하여 성능을 최적화

전체 페이지를 다시 렌더링하지 않고, 변경된 요소만 빠르게 업데이트 가능

• 단방향 데이터 흐름
  데이터가 부모 컴포넌트에서 자식 컴포넌트로만 흐르는 단방향 데이터 바인딩을 사용
  데이터의 흐름을 쉽게 추적하고, UI의 상태를 예측

SPA(Single Page Application)란?

단일 HTML 페이지로 구성된 애플리케이션으로, 페이지 간 이동 시 전체 페이지를 다시 로드하지 않고 동적으로 콘텐츠를 변경하는 방식
주로 빠른 사용자 경험과 부드러운 UI 전환을 제공하기 위해 사용

주요 개념 및 특징

1. MPA(Multi Page Application)와의 차이점 MPA: 새로운 페이지로 이동할 때마다 전체 HTML을 다시 요청하고 전체 페이지가 새로고침
   SPA: 애플리케이션이 한 개의 HTML 페이지로 구성되며, 페이지 이동 시 필요한 데이터만 가져와 UI의 일부만 변경
2. AJAX 및 Fetch API 사용 SPA는 AJAX나 Fetch API를 사용하여 서버와 비동기적으로 통신하고, 필요한 데이터만 받아와 페이지 새로고침 없이 UI를 동적으로 업데이트
3. 클라이언트 사이드 라우팅(Client-Side Routing) 브라우저의 URL을 조작하여 페이지 이동처럼 보이게 하지만, 실제로는 하나의 페이지에서 UI만 업데이트하여 사용자 경험을 향상

React Router 같은 라우팅 라이브러리를 사용하여 SPA에서 페이지 전환을 관리

장점

1. 빠른 페이지 전환
   페이지 간 전환 시 전체 페이지를 다시 로드하지 않기 때문에 빠르고 부드러운 사용자 경험을 제공

2. 모바일 애플리케이션 유사한 UX
   SPA는 모바일 애플리케이션처럼 부드러운 애니메이션과 빠른 페이지 전환을 제공함

3. 브라우저 히스토리 관리
   클라이언트 사이드 라우팅을 사용하여 브라우저의 뒤로 가기, 앞으로 가기 기능을 효율적으로 관리

단점

1. SEO(Search Engine Optimization)가 어려움
   SPA는 한 번에 전체 페이지를 로드하고, 페이지 내용이 동적으로 변경되기 때문에, 검색 엔진이 페이지의 콘텐츠를 제대로 인식하지 못할 수 있음

2. 초기 로딩 속도
   SPA는 초기에 전체 애플리케이션을 로드하기 때문에, 초기 로딩 시간이 길어질 수 있음

3. 브라우저의 자바스크립트 의존성
   SPA는 모든 페이지 렌더링을 클라이언트에서 처리하므로, JavaScript가 비활성화된 환경에서는 정상적으로 동작하지 않을 수 있음

React와 SPA의 결합

React는 컴포넌트 기반 개발과 Virtual DOM을 통해 SPA를 구축할 때 효율적인 UI 관리와 빠른 렌더링을 제공

• React Router를 사용하여 클라이언트 사이드 라우팅을 구현
• react-scripts를 사용하여 SPA의 기본적인 구조를 쉽게 설정

React Router란?
React 애플리케이션에서 클라이언트 사이드 라우팅을 제공하는 라이브러리로, 페이지 이동 시 URL을 변경하면서도 페이지 리로드 없이 UI만 업데이트하여 SPA 특성을 구현

React로 SPA 구현 시 주의사항

1. SEO 문제 해결 React와 같은 SPA 프레임워크는 서버 사이드 렌더링(SSR)을 사용하여, 검색 엔진이 페이지 콘텐츠를 쉽게 크롤링할 수 있도록 해야함

2. 초기 로딩 최적화
   페이지의 초기 로딩 속도를 최적화하기 위해 코드 스플리팅 및 지연 로딩을 적용

3. 브라우저 호환성 및 폴리필
   SPA는 대부분의 렌더링을 브라우저에서 처리하기 때문에,각 브라우저의 호환성을 확인하고 폴리필을 적용해야 할 수 있음

Next.js는 React 기반의 서버 사이드 렌더링을 제공하여, SPA의 SEO 문제를 해결

구현 예시

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';

// 간단한 컴포넌트 정의
const Home = () => <h2>홈 페이지</h2>;
const About = () => <h2>소개 페이지</h2>;
const Contact = () => <h2>연락처 페이지</h2>;

// 메인 애플리케이션 컴포넌트
function App() {
  return (
    <Router>
      <div>
        <nav>
          {/* 네비게이션 링크 정의 */}
          <Link to="/">홈</Link> | <Link to="/about">소개</Link> | <Link to="/contact">연락처</Link>
        </nav>
        {/* 라우팅 설정 */}
        <Routes>
          <Route exact path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• BrowserRouter:
  Router의 일종으로, 브라우저의 히스토리 API를 사용하여 URL을 관리

• Link 컴포넌트:
  기존의 <a> 태그를 대체하여 to 속성으로 이동하고자 하는 URL 경로를 지정, 페이지 리로드 없이 다른 경로로 이동할 수 있도록 함

• Route 컴포넌트:
  특정 경로와 컴포넌트를 매핑하여, 해당 경로로 접근했을 때 어떤 컴포넌트를 렌더링할지를 정의

• Routes 컴포넌트:
  여러 Route 중 하나의 경로만 매칭되도록 설정 만약 Routes가 없다면, 여러 개의 Route가 중복 렌더링될 수 있음

페이지 간 전환이 발생할 때 URL은 변경되지만, 페이지 전체가 리로드되지 않고 UI 일부만 업데이트