React 교재 · 입문 1편 · 시리즈 시작

React란 무엇인가? UI 라이브러리 입문

UI 를 컴포넌트로 조립하는 자바스크립트 라이브러리. 입문 1편으로 큰 그림부터.

작은 모듈 컴포넌트 블록들이 퍼즐처럼 조립되어 UI 가 되는 일러스트 — React 컴포넌트 모델 컨셉

JavaScript 를 어느 정도 만질 줄 알게 되면 자연스럽게 마주치는 단어 — React. 채용 공고의 70~80% 가 "React 경험 우대" 를 적어두고, 프론트엔드 개발자의 약 절반이 매일 쓴다. 그래서 한 번쯤은 "이게 뭐길래" 정리하고 가야 한다.

이번 1편은 코드보다 큰 그림. React 가 정확히 어떤 도구인지, Vue/Svelte/Angular 와 뭐가 다른지, 어떤 사람이 왜 쓰는지 — 다음 편부터 본격 시작하기 전 머릿속에 좌표를 박는다.

1. React 는 "프레임워크" 가 아니라 "라이브러리"

공식 문서 첫 줄에 적혀있다 — "A JavaScript library for building user interfaces". framework 가 아니다. 이 단어 선택이 의외로 큰 의미.

프레임워크(Angular·Next.js)는 라우팅·상태관리·데이터 fetch·인증을 다 정해서 준다. "이 길로 가세요" 식. 반대로 라이브러리(React)는 UI 렌더링 한 가지만 책임지고 나머지는 사용자 선택. 라우터는 React Router 쓰든 TanStack Router 쓰든, 상태는 Redux 든 Zustand 든 자유.

의미 — React 입문은 "React 만 배우면 끝" 이 아니라 "React + 라우터 + 상태관리 + 빌드 도구" 같이 익히는 여정. 첫 진입 장벽이 Vue 보다 높은 이유. 대신 본인 입맛에 맞는 도구를 골라 조합하는 자유가 있다.

2. 핵심 아이디어 — 컴포넌트 + JSX + 단방향 데이터

React 가 가르치는 3가지 개념. 이 셋이 React 의 모든 것.

컴포넌트 — UI 를 함수로

React 의 모든 UI 는 함수. 버튼 하나도, 페이지 전체도 함수. 함수가 "이 UI 를 그려달라" 는 설명을 반환하면 React 가 화면에 그린다. 함수를 다른 함수 안에 끼워넣으면 컴포넌트 트리.

function Welcome({ name }) {
  return <h1>안녕, {name}님!</h1>;
}
function App() {
  return <Welcome name="박준성" />;
}

JSX — JavaScript 안에 HTML

위 코드의 <h1>...</h1> 부분이 JSX. 진짜 HTML 이 아니라 JavaScript 표현식으로 변환되는 문법. {name} 같은 중괄호로 JS 값을 직접 박을 수 있는 게 핵심 — 템플릿 문자열 보간보다 훨씬 자연스럽다.

단방향 데이터 — 위에서 아래로만

데이터는 부모 → 자식 (props) 으로만 흐른다. 자식이 부모를 직접 못 바꾼다. 바뀌면 부모가 자신을 다시 그리고, 그 결과 자식도 다시 그려진다. 처음엔 답답해 보이지만, 디버깅할 때 "이 값이 어디서 왔지" 추적이 명확.

3. Vue · Svelte · Angular 와 한 줄 비교

React 를 고르기 전에 옆 동네도 본다. 2026년 기준 4 강자의 차이.

도구	한 줄	입문 난이도	채용 시장
React	UI 라이브러리, 조합 자유 ★	중 (컴포넌트+훅 익히면 본궤도)	★★★ JS 프레임워크 채용의 70~80%
Vue	진입 부드러운 프레임워크	하 (템플릿 문법 직관적)	★★ 아시아권·중소기업
Svelte	컴파일러 — 런타임 거의 없음	하 (코드량 최소)	★ 성장 중, 신규 프로젝트 위주
Angular	완전 풀세트 엔터프라이즈	상 (TS·RxJS·DI 동시 학습)	★★ 대기업·금융권

한 줄 추천 — 일자리·생태계 우선이면 React, 진입 난이도 우선이면 Vue, 가벼움 우선이면 Svelte, 사내 표준에 맞춰야 하면 Angular. 박준성님 회사처럼 풀스택 운영하면서 채용도 고려한다면 React + Next.js 조합이 사실상 표준.

4. 누가 왜 쓰는가 — 실전 시그널 3가지

React 를 도입할지 말지 결정할 때 보는 신호 셋. 하나라도 해당하면 React 가 답이 될 가능성 높다.

신호 1 — 같은 UI 조각이 5번 이상 반복

버튼·카드·모달·input field — 비슷한 모양이 페이지마다 반복된다면 컴포넌트로 빼서 재사용. jQuery 시대처럼 매번 HTML 을 새로 쓰는 대신 함수 한 번 정의, 어디서든 호출.

신호 2 — 데이터가 바뀌면 UI 가 자동 갱신되어야

"좋아요 클릭 → 카운트 +1 → 화면 즉시 반영". 이런 흐름을 직접 DOM 조작으로 짜면 곧 코드가 스파게티가 된다. React 는 "상태가 바뀌면 그 부분만 다시 그린다" 가 기본 동작. 자동.

신호 3 — 모바일·네이티브 앱도 같이 개발

React 를 배우면 React Native 로 iOS·Android 앱도 같은 패턴으로 개발 가능. 한 번 배운 컴포넌트 사고방식이 웹·모바일·심지어 데스크탑(Electron+React) 까지 확장. "한 번 배움 — 어디서나 사용" 의 진짜 의미.

안 맞는 경우 — 정적 콘텐츠 위주 (회사 소개·블로그) 면 React 가 과한 도구. Astro·Next.js Static·일반 HTML 이 더 빠르고 SEO 도 유리. React 는 "사용자 인터랙션·실시간 갱신" 이 핵심일 때 진가가 나온다.

2편에서는 실제 설치 (Vite 로 5분 안에 첫 프로젝트) 부터 시작한다. 이번 1편은 그 전에 "왜 이 도구를 골랐는지" 정리한 셈.

React 교재 2편 — Vite 로 첫 React 프로젝트 만들기. npm create vite@latest 한 줄로 시작하는 모던 개발 환경 셋업.