[React] SPA와 리액트: 현대 웹 개발의 핵심 기술 이해하기

안녕하세요! 오늘은 리액트(React)에 대해 이야기해보려고 해요.
프론트엔드 채용 시, 거의 모든 회사가 요구하는 자격 조건이라고 해도 과언이 아니죠.

 

그런데 리액트가 왜 갑자기 등장했는지, 또 왜 이렇게 인기가 많아졌는지는 잘 모르는 분들도 많더라고요.
사실 리액트의 등장은 그냥 우연이 아니라, 웹 개발 환경과 트렌드 변화와 깊은 관련이 있어요.

 

조금만 거슬러 올라가 보면, 예전 웹은 대부분 정적인 페이지 중심이었어요.
사용자가 버튼을 누르면 페이지가 새로고침되고, 서버에서 HTML을 다시 받아오는 방식이었죠.

 

쉽게 예시를 들어 볼까요?

1️⃣ 쇼핑몰 장바구니

• 정적 페이지: 상품을 장바구니에 담으면 페이지가 새로고침됨.
  • 화면 전체가 깜빡이면서 장바구니 리스트가 나타남.
  • 장바구니 안에서 선택한 수량 같은 상태도 다시 초기화될 수 있음.
• SPA: 수량 버튼 클릭 → 서버에 필요한 데이터만 요청 → 화면 일부만 업데이트.
  • 깜빡임 없이 장바구니 수량이 바로 반영됨.

---

2️⃣ 댓글 작성/좋아요

• 정적 페이지: 댓글을 작성하거나 좋아요를 누르면 페이지 전체가 새로고침됨.
  • 기존 댓글도 깜빡이며, 스크롤 위치가 맨 위로 이동할 수 있음.
• SPA: 댓글 입력 → 서버로 데이터 전송 → 화면 일부만 업데이트.
  • 기존 댓글은 그대로, 스크롤도 유지, 좋아요 숫자만 바로 바뀜.

---

3️⃣ 지도/위치 검색

• 정적 페이지: 지도에서 다른 지역을 검색하면 페이지 전체가 새로고침됨.
  • 지도 화면이 잠깐 사라지고 다시 나타남 → 깜빡임 발생.
• SPA: 검색 결과만 받아서 지도만 갱신 → 깜빡임 없음, 지도 위치 유지.

 

이런 예시가 도움이 되셨나요? 조금 더 이해가 쉬워졌길 바라요 😄

 

 

처음에는 큰 불편함이 없었지만, 웹 서비스가 점점 복잡해지면서 문제가 나타났어요.

특히 사용자 경험이 중요한 서비스에서는 페이지 깜빡임과 느린 로딩이 큰 걸림돌이었죠.

 

그래서 등장한 것이 바로 SPA(Single Page Application)예요.
SPA는 한 페이지 안에서 필요한 부분만 갱신해서 보여주는 방식이에요.

 

SPA는 많은 웹 페이지를 로딩하더라도, 필요한 데이터만 빠르게 업데이트할 수 있어요.
덕분에 페이지 로딩 속도가 빨라지고, 트래픽도 줄일 수 있죠.
화면 전환이 부드럽고, 업데이트가 끝날 때까지 기다리는 시간도 짧아져서 사용자가 몰입감 있게 웹을 사용할 수 있어요. 😄
덕분에 페이지 전체를 새로 불러오지 않아도 되고, 사용자 입장에서는 앱처럼 부드럽게 느껴지죠.

 

SPA의 주요 장점

1️⃣ 빠른 로딩 속도와 반응성
SPA는 페이지 전환 시 서버에서 전체 HTML을 내려받지 않고, 필요한 데이터만 업데이트해요.
최초 한 번만 전체 웹 애플리케이션 파일을 다운로드하면 이후에는 필요한 데이터만 받아 화면을 바꿀 수 있죠.
덕분에 로딩 속도가 빨라지고, 서버 트래픽도 줄일 수 있어요.

 

2️⃣ 향상된 사용자 경험
빠른 화면 전환과 부드러운 렌더링 덕분에, 사용자는 SPA를 엑셀이나 워드 같은 네이티브 앱처럼 느낄 수 있어요.
페이지가 느리면 사용자가 쉽게 이탈하지만, SPA는 체류 시간을 늘리고 만족도를 높일 수 있습니다.

 

3️⃣ 웹/모바일 공통 아키텍처 활용
전통적인 웹 개발 방식에서는 모바일 앱용 API 서버를 별도로 구성해야 했지만,
SPA는 UI와 서버 데이터를 분리하고 비동기 방식으로 데이터를 가져오기 때문에
웹 앱뿐 아니라 모바일 앱에서도 같은 백엔드를 활용할 수 있어 개발 효율이 높아요.

 

4️⃣ 복잡한 대규모 애플리케이션 대응
사용자와의 상호작용이 많고 동적 요소가 많은 앱도 SPA라면
필요한 부분만 업데이트하기 때문에 트래픽 부담을 줄이고 반응성을 유지할 수 있어요.
React, Vue, Angular 같은 프레임워크가 SPA 원칙을 도입하는 이유도 바로 여기에 있죠.

 

 

하지만 SPA 개발도 쉽지만은 않았어요.
자바스크립트 코드가 점점 복잡해지고, 상태 관리가 어려워지면서 개발자들이 머리를 싸매야 했거든요.

 

이때 등장한 것이 페이스북에서 만든 리액트예요.

리액트는 컴포넌트 단위로 UI를 쪼개 관리할 수 있게 해주고,

상태(state)가 바뀌면 알아서 화면을 효율적으로 업데이트해주는 가상 DOM(Virtual DOM)을 도입했어요.

덕분에 복잡한 SPA도 훨씬 깔끔하고, 유지보수가 쉬워졌죠.

 

 

즉, 리액트는 단순히 “유행하는 라이브러리”가 아니라,
SPA 시대의 필연적인 해결책이자, 개발자들의 고민을 덜어주는 도구였던 거예요.

 

 

오늘 글에서는 리액트가 왜 만들어졌는지, 어떤 문제를 해결하려고 했는지, 그리고 SPA와 어떤 관계가 있는지를 친근하게 풀어보려고 해요.
코드를 바로 다루기 전, 이렇게 배경부터 이해하면 훨씬 재밌게 따라올 수 있답니다.

 

리액트가 왜 만들어졌는가?

리액트는 SPA 개발의 복잡함을 해결하기 위해 만들어졌어요.

 

페이스북은 이런 문제를 해결하기 위해 UI를 컴포넌트 단위로 쪼개고,

상태 변화에 따라 필요한 부분만 효율적으로 업데이트하는 가상 DOM(Virtual DOM)을 도입한 리액트를 만들었습니다.
즉, "복잡한 SPA를 쉽게 만들고, 유지보수도 편하게 하자!"가 핵심 목표였어요.

 

 

여기서 궁금한점!

SPA 개발의 복잡함 이 뭐예요? 뭐가 복잡하다는 걸까요?

여기서 말하는 SPA 개발의 복잡함은 단순히 코드가 많아진다는 뜻이 아니라,

사용자 인터랙션과 상태 관리를 처리하는 로직이 점점 얽히면서 생기는 문제를 말해요. 😄
좀 더 쉽게 풀어보면 이렇게 이해할 수 있어요.

 

1. 상태(state) 관리 문제

SPA에서는 한 페이지 안에서 여러 UI가 동적으로 바뀌잖아요.
예를 들어:

• 장바구니 목록 업데이트
• 댓글 작성 후 바로 화면 갱신
• 좋아요 버튼 클릭 시 숫자 증가

이럴 때 어떤 데이터가 어디에서 바뀌었는지, 그리고 화면에 어떻게 반영할지를 직접 다 관리해야 했어요.
페이지가 커질수록 “어떤 상태가 어디에 영향을 주는지”가 복잡해지고, 버그가 생기기 쉽죠.

 

2. DOM 업데이트 문제

SPA 이전에는 페이지 전체를 새로 그리면 됐어요.
하지만 SPA에서는 부분만 업데이트해야 하니까, DOM을 직접 조작해야 했어요.

• 어떤 요소를 바꿀지
• 이벤트 핸들러가 꼬이지 않도록
• 데이터와 UI를 동기화

이게 많아지면 코드가 점점 지저분하고 관리하기 어려워지는 구조가 돼요.

 

3. 이벤트와 비동기 처리 문제

SPA는 사용자 이벤트가 많고, 서버 데이터도 **비동기(Async)**로 받아와요.

• 서버에서 데이터를 받아와 화면에 바로 반영
• 동시에 여러 이벤트가 발생하면 상태 충돌 가능

이런 비동기 로직과 이벤트 로직을 직접 관리하다 보면 코드가 복잡해지고, 디버깅도 어렵죠.

 

💡 쉽게 요약하면, SPA는 “화면 전체를 새로 그리지 않고 부분 업데이트”를 하기 때문에
상태 관리 + DOM 업데이트 + 비동기 처리가 복잡하게 얽히면서 코드가 복잡해지는 거예요.

 

2️⃣ 누가 만들었는가?

 

리액트는 페이스북(Facebook)에서 개발되었고, 2013년에 오픈소스로 공개되었습니다.
초기에는 페이스북 내부 뉴스피드에서 UI 문제를 해결하기 위해 시작됐고,
지금은 페이스북뿐만 아니라 인스타그램, 넷플릭스, 에어비앤비 등 다양한 기업에서도 사용되고 있어요.

 

 

---

 

3️⃣ 리액트는 어떻게 사용하는가?

 

리액트는 컴포넌트 기반으로 UI를 구성합니다.

• 화면을 작은 단위(컴포넌트)로 나누고, 각 컴포넌트가 자신만의 상태(state)와 속성(props)을 가짐
• 상태가 바뀌면 리액트가 알아서 화면을 효율적으로 업데이트
• JSX라는 자바스크립트 안에서 HTML처럼 쓸 수 있는 문법으로 UI를 작성

즉, "UI를 작은 블록처럼 나누고, 상태가 바뀌면 필요한 블록만 자동으로 업데이트"하는 방식이에요.
리액트는 웹뿐만 아니라 모바일 앱 개발(React Native)에도 사용될 수 있어 확장성이 뛰어나죠.

 

 

 

1. 리액트 설치

보통은 간편하기 때문에 CRA 방식으로 프로젝트를 시작하시곤 해요. 저희 회사역시도 CRA로 만든 프로젝트들이 많습니다.

(하지만 최근 리액트에서는 해당 방식을 사용하지 말라고 해요. CRA 방법도 설명해드리지만 권장하진 않습니다.)

 

우선 CRA 방식 설명해드릴께요. 왜 리액트 공식 페이지에서 다른 방법을 권장하는지는 이 설명 밑에서 자세히 다룰께요.

 

리액트 프로젝트를 만들려면 Node.js가 필요해요.
설치 후 터미널에서 이렇게 입력하면 간단하게 새 프로젝트를 만들 수 있어요.

npx create-react-app my-app
cd my-app
npm start

 

• create-react-app : 리액트 프로젝트를 빠르게 생성
• npm start : 개발 서버를 실행해서 브라우저에서 바로 확인

이제 브라우저에서 http://localhost:3000을 열면 기본 페이지가 나타나요. 😄

 

여기서

npx create-react-app my-app 

해당 명령어를 CRA(Create React App) 방식이라고 말해요.

 

• CRA란?
  • 페이스북이 만든 공식 툴로, 리액트 프로젝트를 빠르게 생성하고 개발 환경을 세팅해주는 도구
  • 번들러(Webpack), Babel, ESLint 같은 복잡한 설정을 자동으로 구성해 줌
  • 덕분에 바로 코드를 작성하고 개발 서버를 띄울 수 있음
• 명령어 설명
  • npx create-react-app my-app → my-app이라는 폴더에 새 리액트 프로젝트 생성
  • cd my-app → 프로젝트 폴더로 이동
  • npm start → 개발 서버 실행, 브라우저에서 결과 확인 가능

간편하다는 장점으로 리액트 초창기에는 많은 사람들이 CRA 방식을 선호했답니다.

 

 

 

하지만 최근에는,

 

리액트 공식 문서에서는 새로운 프로젝트에 create-react-app(CRA)을 사용하지 말고,

대신 Next.js, Vite, Parcel, Remix와 같은 최신 프레임워크나 빌드 도구를 사용하라고 권장하고 있습니다.

 

 

📌 공식 권장 사항

2025년 2월 14일, 리액트 팀은 CRA를 공식적으로 사용 중단(deprecate)한다고 발표했습니다.

이후 새로 생성한 프로젝트에서는 CRA를 사용할 때마다 경고 메시지가 표시됩니다.

CRA는 더 이상 활성 유지보수가 이루어지지 않으며, 최신 리액트 버전(React 19)과의 호환성 문제로 인해 권장되지 않습니다 react.dev.

 

✅ 왜 CRA를 지양하나요?

• 성능 문제: CRA는 Webpack을 기반으로 하여 개발 서버 시작 속도와 핫 리로드(HMR)가 느립니다.
• 최신 기능 부족: 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 코드 분할 등의 기능이 기본적으로 지원되지 않습니다.
• 유지보수 부족: CRA는 2021년부터 활발한 유지보수가 이루어지지 않고 있으며, 리액트 19와의 호환성 문제로 인해 더 이상 권장되지 않습니다 Socket.

 

🔄 대안으로 권장되는 도구들

 

리액트 팀은 다음과 같은 도구들을 권장하고 있습니다:

• Next.js: 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅 등 다양한 기능을 제공하는 풀스택 프레임워크입니다.
• Vite: ESBuild를 기반으로 한 빠른 개발 서버와 빌드 도구로, 설정이 간단하고 성능이 뛰어납니다.
• Parcel: 제로 설정으로 빠른 빌드를 지원하는 도구입니다.
• Remix: 웹 표준을 기반으로 한 최신 프레임워크로, 데이터 패칭과 렌더링 최적화에 중점을 둡니다.

이러한 도구들은 최신 리액트 기능을 지원하며, 성능과 개발 경험을 향상시킬 수 있습니다.

 

🛠️ CRA를 대체하려면?

• 새로운 프로젝트 시작 시: CRA 대신 위에서 언급한 도구들 중 하나를 선택하여 시작하는 것이 좋습니다.
• 기존 CRA 프로젝트를 마이그레이션할 때: 리액트 팀은 Vite, Next.js, Remix 등으로의 마이그레이션 가이드를 제공하고 있습니다.

리액트 공식 문서에서는 이러한 대체 도구들에 대한 자세한 정보를 제공하고 있으며, 프로젝트의 요구사항에 맞는 도구를 선택할 수 있도록 안내하고 있습니다 react.dev.

 

 

---

 

리액트 핵심 문법

리액트에서 가장 기본이 되는 개념은 State와 Props입니다.
이 두 가지를 이해하면, 컴포넌트 단위로 UI를 만들고 데이터가 바뀔 때 화면이 어떻게 업데이트되는지 쉽게 이해할 수 있어요. 😄

 

State  =  컴포넌트의 메모리

• 컴포넌트가 가지고 있는 값들을 저장하는 공간
• 값이 바뀌면 리액트가 알아서 UI를 갱신
• 페이지 전체를 새로고침하지 않고도 상태 변화에 따라 화면을 업데이트할 수 있음

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 여기서 count가 메모리 역할

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

• count는 컴포넌트가 기억하고 있는 값
• 버튼 클릭 시 setCount로 값을 바꾸면,
• 리액트가 변경된 값으로 화면을 다시 그려줌

 

 

 

Props = 부모가 내려주는 값 (부모 = 상위컴포넌트)

• Props는 컴포넌트가 부모로부터 받는 데이터
• 읽기 전용(Read-only)이어서, 자식 컴포넌트에서는 직접 바꿀 수 없음
• 화면에 데이터를 전달하거나, 컴포넌트 재사용 시 설정값을 넣을 때 사용

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님! 😄</h1>;
}

function App() {
  return (
    <div>
      <Greeting name="콘솔로그" />
      <Greeting name="프론트엔드 개발자" />
    </div>
  );
}

• 부모(App)에서 name="콘솔로그"과 name="프론트엔드 개발자"를 자식(Greeting)에 전달
• 자식은 받은 값을 그대로 화면에 표시

State와 Props 차이

구분	State	Props
정의	컴포넌트 내부에서 관리하는 데이터	부모가 자식에게 전달하는 값
변경 가능	가능 (setState 사용)	불가능 (읽기 전용)
역할	UI가 동적으로 바뀔 때 사용	컴포넌트 설정/데이터 전달용

💡 쉽게 비유하면:

• State → “컴포넌트 안에서 마음대로 바꿀 수 있는 메모리”
• Props → “부모가 준 선물 상자, 열어서 볼 수는 있지만 마음대로 바꿀 수는 없음”

 

App
 ├─ Counter(state: count=0)                       <-- state는 Counter에서 관리
 └─ Greeting(state: name="콘솔로그")               <-- Greeting 자체 state
       └─ Profile(props: name="콘솔로그", state: age=25)  <-- Profile에서 age state 관리, 부모(Greeting)의 name을 props로 사용

 

• Counter → 자체 count 상태 관리
• Greeting → 자체 name 상태 관리
• Profile → 부모(Greeting)로부터 받은 name을 props로 사용, 자체 age 상태 관리

 

---

 

리액트의 조건부로 렌더링

 

리액트는 앞서 설명했듯 SPA 기반이기 때문에, 조건부 렌더링을 활용해 효율적이고 부드러운 화면 업데이트를 제공합니다.

왜 리액트는 조건부로 렌더링할까요? 그 이유는 아래와 같습니다.

 

1️⃣ 성능 최적화

웹 앱에서 모든 상태 변화마다 전체 화면을 다시 그리면 느려집니다.
특히 SPA에서는 한 페이지 안에 여러 컴포넌트가 동시에 존재하기 때문에, 불필요하게 렌더링하면 속도 저하와 브라우저 과부하가 생길 수 있습니다.

예: 100개의 리스트 아이템이 있을 때,
하나의 아이템만 바뀌었는데 100개를 다 다시 그리면 비효율적입니다.

 

2️⃣ 필요한 부분만 업데이트

리액트는 Virtual DOM을 사용하여 실제 DOM과 비교(Diff)한 후,
변경된 부분만 실제 DOM에 반영합니다.
즉, 조건부 렌더링으로 UI의 필요한 부분만 업데이트되어 효율적입니다.

 

3️⃣ 상태와 데이터 기반 UI

리액트의 핵심 철학은 데이터가 UI를 결정한다(Data-driven UI) 입니다.
State, Props, Context 등의 값이 바뀔 때만 렌더링되므로,
화면과 데이터의 일관성을 유지할 수 있습니다.
불필요한 렌더링을 줄이고, 사용자가 보는 화면과 실제 데이터가 항상 일치하게 됩니다.

 

4️⃣ 사용자 경험 향상

필요한 부분만 빠르게 업데이트하므로, 화면 전환이 부드럽고 자연스러움
전체 페이지를 다시 불러오지 않아 몰입감 있는 UI 경험을 제공하며,
SPA 환경에서는 특히 중요한 요소입니다.

 

---

 

라이프사이클과 훅(Hooks)

리액트 컴포넌트는 생성되고, 업데이트되고, 삭제되는 생명주기(Lifecycle)를 가지고 있어요.
클래스형 컴포넌트에서는 componentDidMount, componentDidUpdate, componentWillUnmount 같은 메서드를 사용했지만,
함수형 컴포넌트에서는 Hooks를 사용합니다.

주요 훅 예시

• useEffect: 컴포넌트가 생성, 업데이트, 삭제될 때 동작 정의
• useMemo: 계산량이 많은 값이나 함수를 메모이제이션하여 불필요한 재계산 방지
• useCallback: 함수 자체를 메모이제이션해서 자식 컴포넌트 불필요한 렌더링 방지

 

** 리액트에서 생명주기가 필요한 이유

리액트 컴포넌트는 단순히 한 번 그려지는 UI가 아니라, 동적으로 변화하는 화면을 만들기 위해 존재합니다.
따라서 컴포넌트가 생성되고, 업데이트되고, 사라지는 과정마다 특정 작업을 처리할 필요가 있어요.

 

💡 요약하면, 생명주기가 필요한 이유는:

1. 초기화 작업: 컴포넌트가 생성될 때 필요한 작업 수행
2. 업데이트 작업: 상태/데이터 변경에 따라 작업 수행
3. 정리 작업: 컴포넌트 제거 시 리소스 정리

즉, 생명주기는 컴포넌트의 “생성과 관리, 종료”를 체계적으로 다루기 위해 필요합니다.
SPA 환경에서 수많은 컴포넌트가 동시에 존재할 때, 리소스 누수 없이 효율적으로 동작하게 만드는 핵심 개념이에요.

 

 

조건부 렌더링 확장

리액트에서 조건부 렌더링은 UI를 필요한 상황에서만 보여주는 기능이에요.
기본적인 삼항연산자 외에도 여러 방법이 있습니다.

const isLoggedIn = true;

return (
  <div>
    {/* 삼항연산자 */}
    {isLoggedIn ? <p>환영합니다!</p> : <p>로그인이 필요합니다.</p>}

    {/* && 연산자 */}
    {isLoggedIn && <button>로그아웃</button>}

    {/* switch 사용 */}
    {(() => {
      switch(status) {
        case "loading": return <p>로딩 중...</p>;
        case "error": return <p>에러 발생!</p>;
        default: return <p>데이터 준비 완료</p>;
      }
    })()}
  </div>
);

 

💡 포인트:

• 조건부 렌더링으로 불필요한 요소 생성 방지 → 성능 개선
• UI 흐름을 깔끔하게 유지 가능

 

컴포넌트 구조와 재사용

리액트의 핵심 장점 중 하나는 컴포넌트를 재사용 가능하게 구조화할 수 있다는 점이에요.

 

 

 

 

오늘은 리액트가 등장한 배경과 SPA, 그리고 리액트의 핵심 문법과 렌더링 원리에 대해 이야기해봤어요.
리액트는 단순히 인기 있는 라이브러리가 아니라, 복잡한 SPA 개발을 효율적으로 만들어주는 도구예요.

State와 Props를 통해 컴포넌트 단위로 데이터를 관리하고, 조건부 렌더링으로 필요한 부분만 업데이트할 수 있죠.
Hooks를 활용하면 함수형 컴포넌트에서도 생명주기 관리와 성능 최적화가 가능해요.

컴포넌트를 구조화하고 재사용하며, React.memo 같은 최적화를 적용하면 유지보수성과 성능까지 잡을 수 있습니다.
Virtual DOM 덕분에 화면 갱신이 효율적이고, 사용자 경험도 부드럽고 자연스럽게 만들어줍니다.

리액트를 이해하면 단순히 코드를 작성하는 수준을 넘어, 데이터와 UI를 어떻게 설계할지 감이 생깁니다.

처음에는 어렵게 느껴질 수 있지만, 차근차근 State, Props, 렌더링 원리부터 익히면 금방 익숙해져요.

리액트의 세계에 발을 들이면, 웹 개발이 훨씬 더 즐겁고 직관적으로 느껴질 거예요! 😄

 

 

 

 

 

 

 

 

읽어보면 좋을 만한 참고 사이트

SPA 관련 정리 글 : https://www.elancer.co.kr/blog/detail/214

SPA란? 웹 개발 트렌드 SPA의 특징부터 구현 방법까지 모두 알려드립니다! I 이랜서 블로그

 

리액트 공식문서: https://ko.react.dev/

React

 

React 기초 및 TodoLIst: https://react.vlpt.us/

벨로퍼트와 함께하는 모던 리액트 · GitBook

 

 

React 따라해보기: https://nomadcoders.co/react-for-beginners

React 리액트 무료 강의: 영화 웹 서비스 만들기 (56,000명 수강 중)