React : SPA/MPA, React, JSX, 컴포넌트 개념 정리

1. SPA란 무엇인가? / MPA란 무엇인가?

1-1. SPA(Single Page Application)

SPA : 단일 페이지로 동작하는 웹 애플리케이션

처음 접속할 때 index.html과 자바스크립트를 로드하고, 이후 화면 전환은 전체 새로고침 없이 필요한 부분만 다시 그리는 방식이다.

• 특징
  • 화면 이동 : 새로고침 없이 부분 갱신
  • 라우팅 : 프론트엔드에서 처리하는 경우가 많음
  • 데이터 갱신 : 보통 API 호출 결과로 화면을 다시 그림
    전체를 다시 불러오는 게 아니기 때문에 데이터 소모가 적음
• 장점
  • UX : 화면 전환이 자연스럽고 빠르게 느껴짐
  • 개발 구조 : 프론트/백엔드 분리(API 중심)에 적합함
• 단점
  • 초기 로딩 : 번들이 커지면 무거울 수 있음
  • 검색엔진에 노출이 잘 안 될 수 있음 (SSR/SSG로 보완 가능)
• 보완 방법(SEO)
  • SSR : 서버에서 HTML을 먼저 렌더링해 내려줌(예 : Next.js)
  • SSG : 빌드 시점에 정적 HTML을 생성해 제공함(예 : Next.js SSG)
  • 프리렌더링 : 특정 페이지를 미리 HTML로 생성해 제공함
  • 메타태그/OG 태그 : 페이지별 title, description, OG 태그를 라우팅과 함께 정확히 관리함

1-2. MPA(Multi Page Application)

MPA : 여러 페이지로 구성되며 이동 시마다 새 HTML 문서를 로드하는 방식

페이지를 이동할 때마다 서버에서 새로운 HTML 문서를 내려받아 전체 페이지가 다시 로드된다.

• 특징
  • 페이지 이동 : 전체 새로고침 발생
  • 라우팅 : 서버가 URL별 HTML을 제공하는 구조가 일반적임
• 장점
  • SEO : 기본적으로 유리함
  • 관리 : 단순 서비스는 페이지 단위 분리가 오히려 쉬울 수 있음
• 단점
  • UX : 페이지 전환 시 새로고침으로 흐름이 끊길 수 있음

1-3. SPA vs MPA 비교

SPA : 한 번 로드 후 부분 갱신
MPA : 이동할 때마다 새 페이지 로드

---

2. React란 무엇인가?

React : UI(User Interface)를 만들기 위한 자바스크립트 라이브러리

화면을 컴포넌트 단위로 쪼개고, 상태(state)가 변하면 해당 상태에 맞게 UI가 자동으로 다시 렌더링되도록 만드는 방식이 핵심이다.

• 핵심 키워드 3가지
  • 컴포넌트 기반 : 화면을 작은 단위로 나누고 재사용 가능하게 구성
  • 선언형 UI : DOM을 어떻게 조작할지보다 어떤 화면이 나와야 하는지를 선언
  • 상태 기반 렌더링 : 데이터(state)가 바뀌면 화면이 그에 맞게 다시 그려짐

---

3. JSX 문법이 무엇인가?

JSX : 자바스크립트 안에서 HTML처럼 보이는 문법을 작성할 수 있게 해주는 문법

React 컴포넌트에서 UI 구조를 더 직관적으로 작성하기 위해 사용한다.

• JSX 기본 포인트
  • 표현식 삽입 : { } 안에 자바스크립트 표현식을 쓸 수 있음
  • 클래스 지정 : class 대신 className 사용
  • 루트 요소 : 하나의 루트 요소로 감싸야 함(또는 Fragment 사용)

---

4. 컴포넌트가 무엇인지?

컴포넌트 : UI를 구성하는 재사용 가능한 단위

버튼, 입력창, 카드, 페이지 등 UI를 작은 조각으로 나눠서 관리할 수 있게 해준다.

• 컴포넌트 구조(개념)
  • props : 부모가 자식에게 전달하는 입력 데이터(읽기 전용)
  • state : 컴포넌트 내부에서 관리하는 값(변경 가능)
  • render(UI) : props/state에 따라 결정되는 화면 결과