React?
- Meta(구 Facebook)가 개발한 오픈소스 JavaScript UI 라이브러리
- 2013년 오픈소스로 공개
- 사용자 인터페이스(UI)를 컴포넌트 단위로 구성하는 방식
- 현재 프론트엔드 생태계에서 가장 널리 사용되는 라이브러리
주요 특징
컴포넌트 기반 (Component-Based)
- UI를 독립적이고 재사용 가능한 컴포넌트로 분리
- 각 컴포넌트는 자체 상태(State)와 로직을 가짐
- 작은 컴포넌트를 조합해 복잡한 UI를 구성
선언형 (Declarative)
- “어떻게 그릴지”가 아닌 “무엇을 그릴지”를 선언
- 상태가 변경되면 React가 자동으로 UI를 다시 렌더링
// 명령형(Imperative) - DOM을 직접 조작
const button = document.getElementById('btn');
button.textContent = '클릭됨';
button.style.color = 'red';
// 선언형(Declarative) - 상태에 따라 UI를 선언
function Button({ clicked }) {
return <button style=>
{clicked ? '클릭됨' : '클릭하세요'}
</button>;
}
가상 DOM (Virtual DOM)
- 실제 DOM 변경 전에 가상 DOM에서 비교(Diffing)
- 변경된 부분만 실제 DOM에 반영 → 불필요한 렌더링 최소화
- 직접 DOM을 조작하는 것보다 효율적
단방향 데이터 흐름 (One-Way Data Flow)
- 데이터는 부모 → 자식 방향으로만 흐름
- 상태 변화를 추적하기 쉬워 디버깅이 용이
핵심 개념
| 개념 |
설명 |
| 컴포넌트 |
UI의 재사용 가능한 최소 단위 |
| JSX |
JavaScript 안에 HTML을 쓸 수 있는 문법 |
| Props |
부모가 자식 컴포넌트에게 전달하는 데이터 |
| State |
컴포넌트 내부에서 관리하는 동적 데이터 |
| Hooks |
함수형 컴포넌트에서 상태/생명주기를 다루는 함수 |
장점
- 풍부한 생태계: npm 패키지, 라이브러리, 커뮤니티 방대
- 재사용성 높은 컴포넌트: 한 번 만들면 여러 곳에서 사용
- 빠른 렌더링: 가상 DOM으로 최소한의 DOM 업데이트
- React Native: 모바일 앱(iOS/Android)도 동일 문법으로 개발 가능
- Next.js: 서버사이드 렌더링(SSR), 정적 사이트 생성(SSG) 지원
단점
- 라이브러리: 풀 프레임워크가 아니라 라우터, 상태관리 등 직접 선택 필요
- 빠른 업데이트: 생태계 변화 속도가 빨라 지속적인 학습 필요
- JSX 학습 곡선: HTML과 유사하지만 다른 점들이 존재
React vs Vue vs Angular
| |
React |
Vue |
Angular |
| 타입 |
라이브러리 |
프레임워크 |
프레임워크 |
| 언어 |
JavaScript/TypeScript |
JavaScript/TypeScript |
TypeScript |
| 학습 곡선 |
중간 |
낮음 |
높음 |
| 커뮤니티 |
매우 큼 |
큼 |
큼 |
| 주요 사용처 |
Meta, Netflix, Airbnb |
Alibaba, Xiaomi |
Google, Microsoft |
환경 구성
필수 도구
- Node.js v18 이상 (LTS 권장)
- npm 또는 pnpm
- VS Code + React 관련 확장
프로젝트 생성 도구
| 도구 |
특징 |
| Vite |
빠른 개발 서버, 현재 표준 |
| Create React App |
공식 도구 (현재는 사실상 deprecated) |
| Next.js |
SSR/SSG가 필요한 프로덕션 앱 |
관련 링크
