리액트란 무엇인가

이 책의 시작 챕터입니다. 다음 2장부터 본격적으로 코드를 쓰기 시작합니다. 본 챕터에서는 코드를 쓰기 전에 왜 다시 리액트인지, 이 책이 다른 입문서와 어떻게 다른지, 그리고 1장부터 34장까지의 흐름을 정리합니다.

뒤이어 나올 4부 모던 Next.js, 5부 운영·테스트·배포, 6부 풀스택 capstone까지도 모두 본 챕터의 마지막 절 “이 책이 다룰 범위” 안에 들어 있습니다. 그래서 본 챕터는 단순한 “1부 1장” 이상입니다. 천천히 따라와 주세요.

왜 다시 리액트? #

같은 사이트에 옛 리액트 기초 강좌 15편이 있습니다. 컴포넌트, props, state, useEffect 같은 기초를 처음 배우기 좋은 시리즈이고, 사이트에 그대로 남겨 둡니다. 그 시리즈도 사실 hooks 기반이지만, 그사이 리액트 생태계는 더 멀리 갔습니다. 큰 변화 몇 개만 추려도 다음과 같습니다.

• App Router와 Server Components (Next.js 13~15, React 19) — 페이지 단위 라우팅에서 layout / loading / error / not-found가 일급인 모델로 옮겨졌습니다. 그리고 서버에서 직접 데이터를 패칭하는 컴포넌트가 기본이 되었습니다.
• Server Actions (React 19) — <form action={fn}> 안에 서버 함수를 직접 둘 수 있게 되었습니다. fetch + API 라우트 + revalidate 한 사이클을 함수 하나로 끝낼 수 있습니다.
• use() 훅 (React 19) — Promise와 Context 모두를 풀 수 있는 훅입니다. 조건부 호출이 허용되는 유일한 훅이기도 합니다.
• React Compiler (React 19) — 자동 memoization이 들어왔습니다. memo / useMemo / useCallback을 직접 쓸 일이 그만큼 줄었습니다.
• ref as prop (React 19) — forwardRef 없이 ref를 그냥 prop으로 받는 모델로 바뀌었습니다.
• TypeScript 우선 — 2018~2020 시점에는 “옵션"이었던 TypeScript가 이제는 사실상의 기본이 되었습니다. 거의 모든 라이브러리가 타입을 함께 제공합니다.
• Vite + pnpm — create-react-app은 공식적으로 deprecated되었습니다. Vite가 새 프로젝트의 표준이 되었습니다.

도구 체인과 기본 원리 둘 다 바뀌었습니다. 이 책은 처음부터 그 변화 위에서 시작합니다.

옛 강좌는 그대로 둡니다. 옛 리액트(Class component · Pages Router · Redux-only · componentDidMount)를 이 책의 modern 스타일로 옮기는 절차는 부록 A 옛 리액트 마이그레이션에서 따로 정리해 두었습니다. 옛 강좌나 옛 코드베이스를 알고 있는 독자라면 이 책을 1장부터 차례로 읽으면서 가끔 부록 A를 곁에 두면 됩니다.

리액트의 탄생 #

리액트는 2011년 페이스북의 소프트웨어 엔지니어 조던 워크(Jordan Walke)가 만들었고, 페이스북의 뉴스피드 기능에 처음 적용되었으며, 2013년에 오픈소스로 공개되었습니다.

당시 페이스북은 점점 복잡해지는 UI를 관리하는 데 어려움을 겪고 있었습니다. 사용자가 댓글을 달면 그 즉시 화면 곳곳의 카운터, 알림 배지, 피드의 상태가 모두 일관되게 업데이트되어야 했는데, 기존의 명령형 DOM 조작 방식으로는 이 모든 부분을 빠뜨리지 않고 갱신하기가 매우 까다로웠습니다. 리액트는 바로 이 “복잡한 UI의 일관성을 유지하는 문제"를 해결하기 위해 태어났습니다.

그 후 10년이 넘는 시간이 흐르면서 리액트는 단순한 UI 라이브러리에서 풀스택 모델(RSC + Server Actions)로 확장되었습니다. 이 책의 4부에서 그 확장된 영역을 다룹니다.

라이브러리인가 프레임워크인가 #

흔히 “리액트 프레임워크"라고 부르지만, 엄밀히 말하면 리액트는 UI 라이브러리입니다. 라우팅, 데이터 패칭, 폼 처리 같은 풀스택 기능을 그 자체로 강제하지 않고, 오직 “사용자 인터페이스를 그리는 일"에 집중합니다.

이 미니멀한 철학 덕분에 리액트는 그 위에서 동작하는 메타 프레임워크의 생태계를 만들었습니다. 가장 유명한 것은 Next.js이고, 그 외에도 Remix, Astro, TanStack Start가 있습니다. 본 사이트(schoolofweb.net)도 Hugo로 옮기기 전에는 Next.js 위에서 돌아갔습니다.

이 책은 4부 전체를 Next.js(App Router)에 할애합니다. “리액트만"으로 끝나는 입문서가 아니라, 리액트가 실제로 쓰이는 영역인 풀스택 메타 프레임워크 위까지 한 권에 담기 위해서입니다.

리액트의 핵심 특성 5가지 #

리액트의 핵심 특성을 다섯 가지로 정리해 봅시다. 이 책의 본문 1~34장에서 이 다섯 가지를 차례로 깊게 다룹니다.

1. 컴포넌트 기반 (Component-based) #

리액트는 화면을 작은 조각으로 쪼개는 것에서 시작합니다. 버튼, 입력창, 카드, 헤더, 댓글 한 줄. 이 모든 요소를 컴포넌트라는 독립된 단위로 만들고, 이들을 레고 블록처럼 조합해서 하나의 화면을 완성합니다. 같은 컴포넌트를 여러 곳에서 재사용할 수 있고, 각 컴포넌트는 자신의 동작과 모양에만 책임을 지면 됩니다.

이 책에서는 4장(컴포넌트와 props)에서 첫 컴포넌트를 만들고, 17장(props와 children 타이핑)에서 TypeScript로 그 인터페이스를 다듬으며, 24장(Server vs Client Components)에서 컴포넌트의 새로운 두 갈래인 server / client를 다룹니다.

2. 선언형 (Declarative) #

기존 자바스크립트로 UI를 만들 때는 “어떻게(How)” 화면을 바꿀지 단계별로 명령해야 했습니다. 리액트는 반대로 “무엇을(What)” 보여줄지만 선언하면, 화면을 그렇게 만드는 일은 리액트가 알아서 처리합니다.

간단한 예로 “버튼을 클릭하면 카운터가 1 증가한다"라는 기능을 만든다고 해 봅시다. 순수 자바스크립트로는 다음과 같이 작성합니다.

let count = 0;
const button = document.querySelector('#btn');
const display = document.querySelector('#count');

button.addEventListener('click', () => {
  count += 1;
  display.textContent = count;
});

같은 기능을 리액트로는 이렇게 작성합니다.

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

DOM을 직접 조작하지 않습니다. count라는 상태가 바뀌면 리액트가 알아서 화면의 해당 부분을 갱신해 줍니다. 화면이 어떻게 바뀌어야 하는지를 일일이 명령하지 않고, 어떤 모습이어야 하는지만 선언하는 것. 이것이 선언형의 의미입니다.

이 책에서는 5장(useState)에서 위 코드의 정확한 모델을 파고들고, 18장(hooks 타이핑)에서 useState<number>의 타입 추론을 살펴봅니다.

3. 가상 DOM (Virtual DOM) #

리액트가 빠르게 동작할 수 있는 비결 중 하나입니다. 실제 브라우저의 DOM은 직접 조작할 때마다 비용이 큽니다. 리액트는 자바스크립트 객체로 만든 가상 DOM을 메모리 안에 두고, 변경이 일어나면 새 가상 DOM과 이전 가상 DOM을 비교(reconciliation)한 뒤 실제로 바뀐 부분만 실제 DOM에 반영합니다.

이 책에서는 8장(리스트와 key)에서 reconciliation 알고리즘이 key를 어떻게 사용하는지 직접 보고, 14장(성능 최적화)에서 가상 DOM 비교 비용을 줄이는 도구들인 memo, useMemo, React Compiler의 역할을 본격적으로 다룹니다.

4. 단방향 데이터 흐름 (One-way data flow) #

리액트에서 데이터는 항상 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 흐릅니다. 자식은 부모의 데이터를 마음대로 바꿀 수 없고, 부모가 명시적으로 전달한 함수를 통해서만 변경 의사를 알릴 수 있습니다. 예측 가능한 흐름 덕분에 디버깅이 쉽고, 큰 애플리케이션에서도 데이터의 출처를 추적하기 쉽습니다.

이 책에서는 11장(상태 끌어올리기)에서 이 모델이 형제 컴포넌트 간 데이터 공유에 어떻게 작용하는지 보고, 12장(useContext)에서 단방향 흐름의 비용이 커질 때 어디에서 끊어야 하는지 다룹니다. 그리고 27장(Server Actions)에서는 클라이언트 → 서버의 단방향이 새 모델에서 어떻게 표현되는지 살펴봅니다.

5. 거대한 생태계 #

리액트의 가장 큰 강점 중 하나는 풍부한 주변 생태계입니다. 라우팅(React Router, Next.js), 상태 관리(Zustand, Jotai, Redux Toolkit), 서버 통신(TanStack Query, SWR), 인증(Auth.js), UI 키트(shadcn/ui, MUI, Chakra UI). 어떤 문제든 이미 만들어진 도구가 있고, 활발한 커뮤니티가 늘 새로운 답을 만들어 냅니다.

이 책의 5부(운영·테스트·배포)에서는 테스팅(Vitest + Playwright), 성능(Web Vitals), 인증(Auth.js), 배포(Vercel / Cloudflare Pages), 관측성(Sentry / PostHog)을 다룹니다. “어떤 문제에 어떤 도구를 골라야 하는가"라는 판단 기준까지 함께 짚습니다.

2026의 리액트 — server-first 모델로 #

위 5가지 핵심 특성은 2011년 이후로 거의 변하지 않았습니다. 그러나 그 위에서 리액트가 쓰이는 방식은 크게 바뀌었습니다.

• 2013~2018: 클라이언트 SPA가 표준이었습니다. 모든 컴포넌트가 브라우저에서만 실행되고, 데이터는 useEffect 안의 fetch로 가져왔습니다.
• 2018~2023: hooks와 Next.js Pages Router가 표준이 됐습니다. getServerSideProps / getStaticProps로 일부 SSR이 도입되었습니다.
• 2023 ~ 현재: App Router + Server Components + Server Actions의 시대입니다. 서버에서 직접 데이터를 패칭하는 컴포넌트가 기본이고, 클라이언트 컴포넌트는 상호작용이 필요한 경우에만 둡니다.

이 변화는 단순한 도구 변경이 아닙니다. “리액트로 풀스택 앱을 만든다"의 의미 자체가 달라졌습니다. 이 책의 4부 22장(왜 Next.js와 Server Components인가)에서 이 전환점을 한 번 더 정리합니다. 그리고 28장(React 19 신규 기능 정리)에서 그 전환점을 가능하게 만든 React 19의 신기능들을 한곳에 묶어 정리합니다.

리액트로 무엇을 만들 수 있나 #

리액트는 단순한 웹사이트부터 거대한 SaaS 서비스까지 거의 모든 종류의 사용자 인터페이스를 만들 수 있습니다.

• 싱글 페이지 앱(SPA) — 페이지 전환 없이 동작하는 동적인 웹 애플리케이션입니다. 페이스북, 트위터, 인스타그램의 웹 버전이 대표 예시입니다.
• 풀스택 웹 앱 — Next.js + RSC + Server Actions + DB의 한 세트로 만듭니다. 이 책의 6부 capstone에서 직접 만들어 봅니다.
• 기업용 대시보드 — 데이터가 실시간으로 변하는 복잡한 관리자 화면을 다룹니다. 리액트의 컴포넌트 모델이 가장 빛을 발하는 분야입니다.
• 콘텐츠 사이트와 블로그 — Next.js 같은 메타 프레임워크를 사용하면 검색엔진에 잘 노출되는 사이트도 리액트로 만들 수 있습니다.
• 모바일 앱 — React Native를 사용하면 같은 사고방식과 비슷한 코드로 iOS, Android 앱을 만들 수 있습니다(이 책의 범위 밖).
• 데스크탑 앱 — Electron과 결합하면 윈도우, 맥, 리눅스용 데스크탑 애플리케이션도 만들 수 있습니다. VS Code, Slack, Notion이 모두 이 방식으로 만들어졌습니다(이 책의 범위 밖).

리액트, Vue, Svelte, Solid #

리액트의 가장 큰 경쟁자는 2026년 시점에 Vue 3, Svelte 5, Solid입니다. Angular도 여전히 살아 있지만 신규 프로젝트의 비중은 줄어드는 추세입니다.

• Vue 3 — 진입 장벽이 낮고 문서가 친절합니다. Composition API로 hooks와 결이 비슷해졌습니다. 중국 시장에서 특히 강합니다.
• Svelte 5 — 컴파일 타임 최적화로 런타임 코드가 작습니다. runes 모델은 리액트의 signals와 결이 비슷합니다. 학습 곡선이 짧습니다.
• Solid — 리액트와 거의 같은 API인데 가상 DOM이 없고 fine-grained reactivity를 씁니다. 성능에 민감한 프로젝트에서 인기를 얻고 있습니다.

리액트의 강점은 **“가장 큰 생태계와 채용 시장”**입니다. 어떤 문제든 이미 만들어진 도구가 있고, 채용 공고의 절대 다수가 리액트를 요구합니다. 학습 자료도 가장 많습니다.

이 책이 다룰 범위 #

이 책은 6부 + 부록으로 구성되어 있습니다.

이 책을 모두 마치고 나면 여러분은:

• 함수 컴포넌트 + hooks로 동적인 UI를 만들 수 있게 됩니다
• TypeScript로 모든 코드의 타입을 안전하게 잡을 수 있게 됩니다
• Next.js App Router · Server Components · Server Actions로 풀스택 앱을 만들 수 있게 됩니다
• Vitest + Playwright로 컴포넌트 / 통합 / E2E 테스트를 짤 수 있게 됩니다
• Web Vitals를 측정하고 개선할 수 있게 됩니다
• Auth.js로 인증을 붙이고, Vercel / Cloudflare Pages에 배포하고, Sentry + PostHog로 프로덕션 환경을 들여다볼 수 있게 됩니다

이 책의 범위 밖인 React Native · Remix · TanStack Start, 디자인 시스템 · 애니메이션 · WebGL은 별도 책의 영역입니다.

연습문제 #

1. 이 책의 차례(1~34장 + 부록 A)를 한 번 훑어보고, 본인이 이미 알고 있다고 느끼는 챕터 / 새롭게 느껴지는 챕터 / 가장 궁금한 챕터를 각각 1~2개씩 골라 메모해 두세요. 책을 다 읽은 뒤 다시 봤을 때 자신의 출발 지점을 확인하는 데 씁니다.
2. 위 “리액트의 핵심 특성 5가지” 중 React 19의 Server Components가 가장 크게 영향을 주는 항목은 어느 것이라고 생각하나요? 한 단락으로 답하고, 다 읽은 뒤 22장~24장과 비교해 보세요.
3. 이 책의 부록 A 옛 리액트 마이그레이션을 한 번 둘러보고, 본인이 이미 알고 있는 옛 스타일(Class component · Pages Router · Redux-only · componentDidMount 등)이 있다면 표시해 두세요. 본문을 읽는 동안 그 부분에 도달할 때마다 부록 A와 교차 참조하면 마이그레이션의 출발점이 됩니다.

한 줄 요약: 이 책은 React 19와 Next.js App Router, TypeScript를 처음부터 표준으로 둔다. 함수 컴포넌트 + hooks · Server Components + Server Actions · TypeScript · 운영 도구 한 세트라는 네 축이 1장부터 34장까지 같은 어조로 이어진다. 옛 스타일은 부록 A에 모아 두었다.

다음 챕터 #

다음 2장 개발 환경 설정 (Node.js + Vite)에서는 본격적으로 코드를 쓰기 위해 Node.js와 pnpm을 설치하고 Vite로 첫 리액트 프로젝트를 만들어 개발 서버를 띄웁니다. 이 책의 모든 예제가 그 환경 위에서 동작합니다.