❶ SPA란?
React SPA(단일 페이지 애플리케이션)는 React JavaScript 라이브러리를 사용하여 사용자가 애플리케이션과 상호 작용할 때 동적으로 업데이트되는 단일 HTML 페이지를 만드는 웹 애플리케이션입니다.
React SPA에서 페이지 콘텐츠는 한 번 로드된 다음 전체 페이지를 다시 로드할 필요 없이 동적으로 업데이트됩니다.
❷ React SPA와 기존 웹 애플리케이션 비교
React SPA는 초기 HTML, CSS 및 JavaScript 파일을 한 번만 로드한다는 점에서 기존 웹 애플리케이션과 다릅니다.
초기 로드 후 전체 페이지를 다시 로드할 필요 없이 사용자가 응용 프로그램과 상호 작용할 때 콘텐츠가 동적으로 업데이트됩니다.
❸ 클라이언트 측 렌더링
React SPA는 클라이언트 측 렌더링을 사용합니다.
즉, 브라우저가 애플리케이션 상태를 기반으로 사용자 인터페이스를 렌더링해야 합니다.
❹ SPA 사용 방법
1. Node.js 설치
React를 사용하려면 컴퓨터에 Node.js를 설치해야 합니다.
공식 웹사이트 https://nodejs.org/en/에서 Node.js를 다운로드하여 설치할 수 있습니다.
2. 새 React 프로젝트 만들기
create-react-app 를 사용하여 새 React 프로젝트를 만들 수 있습니다.
npx create-react-app my-appmy-app이라는 디렉토리에 새로운 React 프로젝트가 생성됩니다.
3. 개발 서버 시작
프로젝트를 생성한 후 다음 명령을 실행하여 개발 서버를 시작할 수 있습니다.
cd my-app
npm start개발 서버가 시작되고 기본 브라우저가 http://localhost:3000으로 열리며 여기에서 실행 중인 React 앱을 볼 수 있습니다.
4. 앱 빌드
앱을 배포할 준비가 되면 다음 명령을 실행하여 앱을 빌드할 수 있습니다.
npm run buildbuild 디렉토리에 앱의 프로덕션 빌드가 생성됩니다.
5. 앱 배포
앱을 웹 서버나 AWS 또는 Firebase와 같은 클라우드 기반 플랫폼에 배포할 수 있습니다.
gh-pages를 사용하여 앱을 GitHub 페이지에 배포할 수 있습니다.
6. React Router 사용
React SPA에서 클라이언트 측 라우팅을 관리하려면 React Router를 사용할 수 있습니다.
다음 명령을 실행하여 React Router를 설치할 수 있습니다.
npm install react-router-dom그 다음 경로를 정의하고 React Router의 'Route' 구성 요소를 사용하여 특정 구성 요소에 매핑할 수 있습니다.
