React 소개

⚛️ React란? & SPA 개념

1. React란?

React는 Facebook에서 개발한 UI 라이브러리로, 사용자 인터페이스를 쉽고 효율적으로 만들 수 있도록 도와줍니다.
웹 페이지를 구성하는 컴포넌트를

독립적이고 재사용 가능한 단위

로 쪼개어 관리할 수 있는 것이 큰 장점입니다.

• 컴포넌트 기반 구조
• 가상 DOM을 사용하여 빠른 렌더링
• 단방향 데이터 흐름 (Unidirectional Data Flow)
• JSX 문법으로 HTML과 JS를 결합한 편리한 코드 작성

React는 프레임워크가 아닌 라이브러리입니다. 필요한 기능은 외부 라이브러리와 조합하여 사용합니다.

2. SPA란 무엇인가요?

SPA (Single Page Application)는 하나의 HTML 페이지에서 동작하는 웹 애플리케이션입니다.
페이지 전체를 다시 로딩하지 않고, 필요한 부분만 동적으로 변경하여 사용자에게 빠르고 부드러운 UX를 제공합니다.

✅ SPA의 특징

• 초기 로딩 시 단 하나의 HTML 페이지를 불러옴
• 이후 사용자 상호작용에 따라 필요한 데이터만 갱신
• React Router와 같은 라이브러리를 통해 주소를 가상으로 관리

⚠️ 단점

• 초기 로딩 속도가 느릴 수 있음
• 검색엔진 최적화(SEO)에 불리함
• 브라우저에서 JS가 꺼져 있으면 작동하지 않음

3. React는 왜 SPA에 적합한가?

React는 상태 변화에 따라 UI를 자동으로 갱신하며, 가상 DOM을 통해 렌더링 효율이 뛰어납니다.
또한 React Router를 이용하면 페이지 이동 없이 URL을 조작하고 화면을 전환할 수 있어 SPA 구조에 최적화되어 있습니다.

---

📌 요약

• React: 컴포넌트 기반의 UI 라이브러리
• SPA: 한 페이지에서 필요한 부분만 갱신하는 웹 애플리케이션
• React는 SPA 구현에 매우 적합