(React) 기본 구조 SPA

React란?

React는 Facebook에서 만든 UI 라이브러리로, 사용자 인터페이스를 컴포넌트 기반으로 구축할 수 있게 도와줌!

대부분의 React 프로젝트는 SPA(Single Page Application) 형태로 개발됨

 

SPA는 하나의 HTML 파일로 시작해서, 필요한 화면을 브라우저에서 JavaScript로 동적으로 렌더링하는 구조

특징

• 컴포넌트 기반: 화면을 작은 단위로 나눠 재사용 가능
• Virtual DOM: 효율적인 렌더링을 위한 가상 돔 구조
• CSR 방식 기본: 초기 로딩 이후 빠른 사용자 경험 제공

---

SPA란?

• SPA(Single Page Application)는 말 그대로 하나의 HTML 페이지에서 모든 화면을 구성하는 웹 애플리케이션 구조

특징

• 최초에 서버에서 index.html 한 장만 내려받음
• 이후 페이지 전환은 브라우저에서 JavaScript로 처리함 (새로고침 없음)
• 사용자는 마치 여러 페이지가 있는 것처럼 느끼지만, 실제로는 단일 페이지에서 동적으로 뷰가 바뀜

예시

• React, Vue, Angular 등 대부분의 프론트엔드 프레임워크는 기본적으로 SPA 구조를 따름
• Gmail, Facebook, Trello 같은 서비스도 SPA 기반

---

Virtual DOM이란?

React는 실제 DOM 대신 Virtual DOM(가상 돔)을 사용해 렌더링 성능을 향상시켜줌

• Virtual DOM은 실제 DOM의 메모리상 복제본
• 상태가 변경되면, 이전 Virtual DOM과 비교(diff)해서 변화된 부분만 실제 DOM에 반영함

이점

• 전체 DOM을 직접 수정하지 않고 최소한의 조작으로 화면을 갱신
• 브라우저 렌더링 비용을 줄여 퍼포먼스를 높임

---

CSR(Client-Side Rendering)이란?

CSR은 말 그대로 브라우저(클라이언트)에서 렌더링을 처리하는 방식임

동작 흐름

1. 사용자가 페이지를 요청함
2. 서버는 index.html과 JavaScript 번들 파일만 전달
3. 브라우저가 이 JS를 실행해 화면을 구성함

예시로 Create React App (CRA)

• index.html엔 <div id="root"></div>만 있음
• React가 이 영역을 채워 넣는 구조 (렌더링은 JS 실행 후 발생)

---

CSR 장점

장점	설명	예시
빠른 사용자 경험	최초 한 번만 HTML+JS를 받아오면, 이후 페이지 전환은 브라우저 내부에서 처리됨 → 새로고침 없이 화면만 바뀜	쇼핑몰 사이트에서 카테고리 클릭 시, 페이지 전체가 새로고침되지 않고 상품 목록만 빠르게 전환
풍부한 인터랙션	JavaScript로 유저 이벤트(클릭, 입력 등)에 즉각 반응하는 UI 구현이 쉬움	채팅 앱, 실시간 댓글 입력, 드래그 앤 드롭 기능 등 복잡한 UI 처리에 적합
서버 부하 감소	서버는 HTML을 그리지 않고 JS/CSS 등 정적 파일만 전달 → 서버의 부담이 적음	정적 파일을 CDN에 배포하면 트래픽이 몰려도 서버가 과부하 없이 대응 가능
클라이언트 중심 아키텍처 구성	프론트엔드와 백엔드를 완전히 분리 가능 API 서버만 구축하면 프론트에서 자유롭게 조작 가능	프론트는 React, 백엔드는 Node/Spring 등 독립 개발 가능 (SPA + REST API 구조)

---

CSR 단점

단점	설명	예시
SEO에 불리함	초기에 HTML 콘텐츠가 거의 없음 → 검색 엔진이 콘텐츠를 제대로 인식하지 못할 수 있음	블로그나 쇼핑몰 상세 페이지를 CSR로 구현하면 검색 결과에 잘 노출되지 않음
초기 로딩 속도 느림	첫 방문 시 JS 번들 파일을 모두 받아야 하므로, 화면 표시까지 시간이 걸림	느린 네트워크 환경에서 사용자가 빈 화면에서 오래 기다려야 함 (특히 모바일에서 문제됨)
JS 의존도 높음	콘텐츠 렌더링이 JS 실행에 완전히 의존 → JS 비활성화된 환경 또는 구형 브라우저에선 화면 표시 불가	JavaScript를 끈 크롤러나 브라우저에서 화면이 전혀 보이지 않음
복잡한 초기 설정 필요	CSR만으로 SEO, 퍼포먼스를 챙기려면 추가 설정이 많아짐 (예: pre-rendering, 메타 태그 등)	react-helmet, sitemap.xml, robots.txt 등을 직접 관리해야 하고, 완전한 해결은 어려움