개요
React는 Meta(Facebook)가 개발한 사용자 인터페이스(UI) 구축용 JavaScript 라이브러리입니다. 컴포넌트 기반 아키텍처와 Virtual DOM을 통해 효율적인 UI 렌더링을 제공하며, 프론트엔드 생태계에서 가장 높은 점유율을 유지하고 있습니다.
- 출시: 2013년 (Facebook 오픈소스)
- 개발: Meta (Jordan Walke)
- 라이선스: MIT
- 웹사이트: https://react.dev
- 패키지: npm
react
핵심 개념
| 개념 | 설명 |
|---|---|
| JSX | JavaScript 안에 HTML을 작성하는 문법 확장 |
| Virtual DOM | 가상 DOM으로 변경 사항만 실제 DOM에 반영 (효율적 렌더링) |
| 컴포넌트 | UI를 독립적이고 재사용 가능한 단위로 분리 |
| 단방향 데이터 흐름 | 부모 → 자식으로 props 전달, 예측 가능한 상태 관리 |
| 선언적 UI | ”어떻게” 대신 “무엇을” 렌더링할지 선언 |
Hooks
React 16.8에서 도입된 함수형 컴포넌트의 상태·생명주기 관리 API:
| Hook | 설명 |
|---|---|
| useState | 컴포넌트 상태(state) 관리 |
| useEffect | 사이드 이펙트 (API 호출, 구독 등) |
| useContext | 컨텍스트(전역 상태) 접근 |
| useRef | DOM 참조 또는 값 유지 |
| useMemo | 연산 결과 메모이제이션 |
| useCallback | 함수 메모이제이션 |
| useReducer | 복잡한 상태 로직 (Redux 스타일) |
import { useState, useEffect } from 'react';
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch('/api/users')
.then(res => res.json())
.then(setUsers);
}, []);
return (
<ul>
{users.map(u => <li key={u.id}>{u.name}</li>)}
</ul>
);
}React 생태계
| 카테고리 | 도구 |
|---|---|
| 메타 프레임워크 | Next.js, Remix, Gatsby |
| 상태 관리 | Zustand, Jotai, Redux Toolkit, Recoil |
| 스타일링 | Tailwind CSS, styled-components, CSS Modules |
| UI 라이브러리 | shadcn/ui, Material UI, Ant Design, Radix |
| 폼 관리 | React Hook Form, Formik |
| 데이터 패칭 | TanStack Query (React Query), SWR |
| 라우팅 | React Router, TanStack Router |
| 테스트 | Vitest, React Testing Library, Playwright |
React Server Components (RSC)
React 18+에서 도입된 서버 컴포넌트:
- 서버에서만 실행되는 컴포넌트 → 클라이언트 번들 크기 감소
- DB 직접 접근, 파일 시스템 읽기 가능
- Next.js App Router에서 기본 적용
'use client'지시어로 클라이언트 컴포넌트 명시
장단점
장점:
- 가장 큰 생태계와 커뮤니티 (npm 패키지, 교육 자료)
- 컴포넌트 재사용으로 생산성 높음
- React Native로 모바일 앱 개발 가능
- 취업 시장에서 가장 높은 수요
단점:
- 라이브러리일 뿐 풀 프레임워크가 아님 (직접 스택 구성 필요)
- 빠른 변화 속도 (클래스 → Hooks → RSC)
- 보일러플레이트가 많을 수 있음
- Virtual DOM 오버헤드 (Svelte, SolidJS 대비)