React
개요
React(리액트)는 페이스북(현 메타)에서 2013년에 오픈소스로 공개한 사용자 인터페이스(UI) 라이브러리이다. 선언형(Declarative) 방식과 컴포넌트 기반 구조를 통해 복잡한 웹 애플리케이션을 효율적으로 구축할 수 있다. React는 Virtual DOM(가상 DOM)이라는 개념을 도입해 실제 DOM 조작을 최소화함으로써 성능을 최적화하고, Hook을 통해 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 손쉽게 구현한다.
역사
| 연도 |
주요 사건 |
| 2011 |
페이스북 내부 프로젝트 “FaxJS”(후에 React) 시작 |
| 2013 |
오픈소스 공개 (BSD‑3-Clause) |
| 2015 |
React Native 발표 – 모바일 앱 개발 지원 |
| 2017 |
Hooks 도입 (v16.8) |
| 2020 |
Concurrent Mode(실험적) 및 Suspense 확대 |
| 2022 |
React 18 출시 – 자동 배치, 스트리밍 서버 렌더링 등 |
핵심 개념
1. 컴포넌트(Component)
UI를 재사용 가능한 단위로 분리한 것이다. 크게 클래스 컴포넌트와 함수형 컴포넌트가 있다. 현재는 Hook을 사용한 함수형 컴포넌트가 권장된다.
2. JSX
JavaScript 안에 XML‑like 문법을 삽입한 확장 문법이다. React.createElement 호출을 자동으로 변환해준다. 예시:
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
주의: JSX는 브라우저가 직접 이해하지 못하므로 Babel 같은 트랜스파일러가 필요하다.
3. Virtual DOM
React는 실제 DOM 대신 메모리 상에 가상의 DOM 트리를 유지한다. 상태가 변하면 새로운 Virtual DOM을 만들고, diff 알고리즘을 통해 변경된 부분만 실제 DOM에 적용한다. 이를 통해 렌더링 비용을 크게 줄인다.
4. State & Props
- Props(속성): 부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터.
- State(상태): 컴포넌트 내부에서 변경 가능한 데이터.
useState Hook을 통해 선언한다.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
클릭 횟수: {count}
</button>
);
}
5. Hook
함수형 컴포넌트에서 React 기능(state, lifecycle 등)을 사용할 수 있게 해주는 함수 집합이다. 주요 Hook:
| Hook |
용도 |
useState |
로컬 상태 관리 |
useEffect |
부수 효과(데이터 fetch, 구독 등) |
useContext |
전역 컨텍스트 접근 |
useMemo |
연산 결과 메모이제이션 |
useCallback |
콜백 함수 메모이제이션 |
useRef |
DOM 엘리먼트 또는 값 저장(리렌더 방지) |
주요 기능 및 API
1. 렌더링 방식
- 동기 렌더링(React 17 이하)
- 동시성 렌더링(Concurrent Mode, React 18) – UI 응답성을 향상시킨다.
2. 라우팅 – React Router
SPA(Single Page Application)에서 URL 기반 페이지 전환을 담당한다.
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
3. 전역 상태 관리 – Redux, Recoil, Zustand 등
React 자체만으로도 충분히 상태를 관리할 수 있지만, 복잡한 트리 구조에서는 전역 상태 관리 라이브러리를 사용한다.
4. 서버 사이드 렌더링(SSR) – Next.js
React 컴포넌트를 서버에서 미리 렌더링해 초기 로드 속도와 SEO를 개선한다.
5. 타입스크립트 지원
React는 TypeScript와의 호환성이 뛰어나며, FC<Props>와 같은 제네릭 타입을 통해 컴포넌트 인터페이스를 명시한다.
import React, { FC } from 'react';
interface Props {
title: string;
count?: number;
}
const Header: FC<Props> = ({ title, count = 0 }) => (
<h1>{title} ({count})</h1>
);
개발 환경 설정
| 단계 |
내용 |
명령어 |
| 1 |
프로젝트 초기화 |
npx create-react-app my-app |
| 2 |
TypeScript 추가 |
npm install --save-dev typescript @types/react @types/react-dom |
| 3 |
ESLint/Prettier 설정 |
npm i -D eslint prettier eslint-plugin-react |
| 4 |
Babel/webpack 커스터마이징(필요 시) |
npm i -D @babel/core @babel/preset-react webpack |
| 5 |
테스트 도구 설치 |
npm i -D jest @testing-library/react |
Tip: create-vite를 이용하면 Vite 기반 초경량 React 프로젝트를 빠르게 만들 수 있다.
성능 최적화 팁
- 불필요한 렌더링 방지
React.memo(컴포넌트 메모이제이션) -
useMemo / useCallback 활용
-
코드 스플리팅
-
React.lazy와 Suspense로 라우트 별 청크 분리
-
이미지 최적화
-
srcset과 loading="lazy" 사용
-
Concurrent Mode(React 18) 활용
-
startTransition으로 낮은 우선순위 작업을 구분
-
프로파일링
- React DevTools → Profiler 탭
다른 프레임워크와 비교
| 항목 |
React |
Vue.js |
Angular |
| 주요 패러다임 |
컴포넌트 + 함수형 |
컴포넌트 + 옵션 API / Composition API |
컴포넌트 + 의존성 주입 |
| 학습 곡선 |
중간 (JSX, Hook) |
낮음 (템플릿) |
높음 (TypeScript + RxJS) |
| 생태계 |
풍부(Next.js, Redux, React Native) |
비교적 작음 |
공식적인 솔루션이 풍부 |
| 성능 |
Virtual DOM + Concurrent Mode |
Virtual DOM + 최적화된 반응형 시스템 |
실제 DOM + Change Detection |
| 기업 채택 |
Facebook, Instagram, Airbnb |
Alibaba, Xiaomi |
Google, Microsoft |
생태계와 주요 라이브러리
| 카테고리 |
라이브러리 |
설명 |
| 라우팅 |
React Router |
선언형 라우팅 |
| 상태 관리 |
Redux, Recoil, Zustand |
전역 상태 관리 |
| UI 컴포넌트 |
Material‑UI, Ant Design, Chakra UI |
디자인 시스템 |
| 데이터 페칭 |
React Query, SWR |
캐시 기반 비동기 데이터 관리 |
| 테스트 |
Jest, React Testing Library |
유닛·통합 테스트 |
| 모바일 |
React Native |
iOS/Android 네이티브 앱 |
| 서버 사이드 |
Next.js, Remix |
SSR/SSG(정적 사이트 생성) |
커뮤니티 및 학습 자료
- 공식 문서: https://reactjs.org/
- GitHub 레포지토리: https://github.com/facebook/react
- Stack Overflow:
reactjs 태그 (활발한 Q&A)
- Discord/Slack:
reactiflux 커뮤니티
- 블로그·튜토리얼: Kent C. Dodds, Dan Abramov(React 팀) 블로그
참고 자료
- React 공식 홈페이지 – “Getting Started”, “Hooks API Reference”.
- “Learning React” (Alex Banks, Eve Porcello) – 입문서.
- “Fullstack React” – 실전 프로젝트 중심 가이드.
- Dan Abramov, “You Might Not Need Redux” – 상태 관리 패턴.
- React Conf 2023 발표 자료 – 최신 기능(Concurrent Mode, Server Components) 정리.
요약
React는 컴포넌트 기반 UI 개발을 위한 현대적인 라이브러리이며, Virtual DOM, Hook, Concurrent Mode 등 혁신적인 기술을 통해 대규모 웹 애플리케이션을 효율적으로 구축할 수 있다. 풍부한 생태계와 활발한 커뮤니티 덕분에 초보자부터 기업 수준까지 널리 활용되고 있다.
# React
---
## 개요
**React**(리액트)는 페이스북(현 메타)에서 2013년에 오픈소스로 공개한 **사용자 인터페이스(UI) 라이브러리**이다. 선언형(Declarative) 방식과 **컴포넌트 기반** 구조를 통해 복잡한 웹 애플리케이션을 효율적으로 구축할 수 있다. React는 **Virtual DOM**(가상 DOM)이라는 개념을 도입해 실제 DOM 조작을 최소화함으로써 성능을 최적화하고, **Hook**을 통해 함수형 컴포넌트에서도 상태 관리와 사이드 이펙트를 손쉽게 구현한다.
---
## 역사
| 연도 | 주요 사건 |
|------|-----------|
| 2011 | 페이스북 내부 프로젝트 “FaxJS”(후에 React) 시작 |
| 2013 | 오픈소스 공개 (BSD‑3-Clause) |
| 2015 | **React Native** 발표 – 모바일 앱 개발 지원 |
| 2017 | **Hooks** 도입 (v16.8) |
| 2020 | **Concurrent Mode**(실험적) 및 **Suspense** 확대 |
| 2022 | **React 18** 출시 – 자동 배치, 스트리밍 서버 렌더링 등 |
---
## 핵심 개념
### 1. 컴포넌트(Component)
UI를 **재사용 가능한 단위**로 분리한 것이다. 크게 **클래스 컴포넌트**와 **함수형 컴포넌트**가 있다. 현재는 Hook을 사용한 함수형 컴포넌트가 권장된다.
### 2. JSX
JavaScript 안에 **XML‑like 문법**을 삽입한 확장 문법이다. `React.createElement` 호출을 자동으로 변환해준다. 예시:
```jsx
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>;
}
```
> **주의**: JSX는 브라우저가 직접 이해하지 못하므로 Babel 같은 트랜스파일러가 필요하다.
### 3. Virtual DOM
React는 실제 DOM 대신 메모리 상에 **가상의 DOM 트리**를 유지한다. 상태가 변하면 새로운 Virtual DOM을 만들고, **diff 알고리즘**을 통해 변경된 부분만 실제 DOM에 적용한다. 이를 통해 **렌더링 비용**을 크게 줄인다.
### 4. State & Props
- **Props(속성)**: 부모 컴포넌트가 자식에게 전달하는 **읽기 전용** 데이터.
- **State(상태)**: 컴포넌트 내부에서 **변경 가능한** 데이터. `useState` Hook을 통해 선언한다.
```jsx
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
클릭 횟수: {count}
</button>
);
}
```
### 5. Hook
함수형 컴포넌트에서 **React 기능**(state, lifecycle 등)을 사용할 수 있게 해주는 함수 집합이다. 주요 Hook:
| Hook | 용도 |
|------|------|
| `useState` | 로컬 상태 관리 |
| `useEffect` | 부수 효과(데이터 fetch, 구독 등) |
| `useContext` | 전역 컨텍스트 접근 |
| `useMemo` | 연산 결과 메모이제이션 |
| `useCallback` | 콜백 함수 메모이제이션 |
| `useRef` | DOM 엘리먼트 또는 값 저장(리렌더 방지) |
---
## 주요 기능 및 API
### 1. 렌더링 방식
- **동기 렌더링**(React 17 이하)
- **동시성 렌더링**(Concurrent Mode, React 18) – UI 응답성을 향상시킨다.
### 2. 라우팅 – React Router
SPA(Single Page Application)에서 **URL 기반 페이지 전환**을 담당한다.
```jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
```
### 3. 전역 상태 관리 – Redux, Recoil, Zustand 등
React 자체만으로도 충분히 상태를 관리할 수 있지만, **복잡한 트리 구조**에서는 전역 상태 관리 라이브러리를 사용한다.
### 4. 서버 사이드 렌더링(SSR) – Next.js
React 컴포넌트를 **서버에서 미리 렌더링**해 초기 로드 속도와 SEO를 개선한다.
### 5. 타입스크립트 지원
React는 **TypeScript**와의 호환성이 뛰어나며, `FC<Props>`와 같은 제네릭 타입을 통해 컴포넌트 인터페이스를 명시한다.
```tsx
import React, { FC } from 'react';
interface Props {
title: string;
count?: number;
}
const Header: FC<Props> = ({ title, count = 0 }) => (
<h1>{title} ({count})</h1>
);
```
---
## 개발 환경 설정
| 단계 | 내용 | 명령어 |
|------|------|--------|
| 1 | 프로젝트 초기화 | `npx create-react-app my-app` |
| 2 | TypeScript 추가 | `npm install --save-dev typescript @types/react @types/react-dom` |
| 3 | ESLint/Prettier 설정 | `npm i -D eslint prettier eslint-plugin-react` |
| 4 | Babel/webpack 커스터마이징(필요 시) | `npm i -D @babel/core @babel/preset-react webpack` |
| 5 | 테스트 도구 설치 | `npm i -D jest @testing-library/react` |
> **Tip**: `create-vite`를 이용하면 Vite 기반 초경량 React 프로젝트를 빠르게 만들 수 있다.
---
## 성능 최적화 팁
1. **불필요한 렌더링 방지**
- `React.memo`(컴포넌트 메모이제이션)
- `useMemo` / `useCallback` 활용
2. **코드 스플리팅**
- `React.lazy`와 `Suspense`로 라우트 별 청크 분리
3. **이미지 최적화**
- `srcset`과 `loading="lazy"` 사용
4. **Concurrent Mode**(React 18) 활용
- `startTransition`으로 낮은 우선순위 작업을 구분
5. **프로파일링**
- React DevTools → Profiler 탭
---
## 다른 프레임워크와 비교
| 항목 | React | Vue.js | Angular |
|------|-------|--------|---------|
| **주요 패러다임** | 컴포넌트 + 함수형 | 컴포넌트 + 옵션 API / Composition API | 컴포넌트 + 의존성 주입 |
| **학습 곡선** | 중간 (JSX, Hook) | 낮음 (템플릿) | 높음 (TypeScript + RxJS) |
| **생태계** | 풍부(Next.js, Redux, React Native) | 비교적 작음 | 공식적인 솔루션이 풍부 |
| **성능** | Virtual DOM + Concurrent Mode | Virtual DOM + 최적화된 반응형 시스템 | 실제 DOM + Change Detection |
| **기업 채택** | Facebook, Instagram, Airbnb | Alibaba, Xiaomi | Google, Microsoft |
---
## 생태계와 주요 라이브러리
| 카테고리 | 라이브러리 | 설명 |
|----------|------------|------|
| 라우팅 | **React Router** | 선언형 라우팅 |
| 상태 관리 | **Redux**, **Recoil**, **Zustand** | 전역 상태 관리 |
| UI 컴포넌트 | **Material‑UI**, **Ant Design**, **Chakra UI** | 디자인 시스템 |
| 데이터 페칭 | **React Query**, **SWR** | 캐시 기반 비동기 데이터 관리 |
| 테스트 | **Jest**, **React Testing Library** | 유닛·통합 테스트 |
| 모바일 | **React Native** | iOS/Android 네이티브 앱 |
| 서버 사이드 | **Next.js**, **Remix** | SSR/SSG(정적 사이트 생성) |
---
## 커뮤니티 및 학습 자료
- **공식 문서**: https://reactjs.org/
- **GitHub 레포지토리**: https://github.com/facebook/react
- **Stack Overflow**: `reactjs` 태그 (활발한 Q&A)
- **Discord/Slack**: `reactiflux` 커뮤니티
- **블로그·튜토리얼**: Kent C. Dodds, Dan Abramov(React 팀) 블로그
---
## 참고 자료
1. **React 공식 홈페이지** – “Getting Started”, “Hooks API Reference”.
2. **“Learning React” (Alex Banks, Eve Porcello)** – 입문서.
3. **“Fullstack React”** – 실전 프로젝트 중심 가이드.
4. **Dan Abramov, “You Might Not Need Redux”** – 상태 관리 패턴.
5. **React Conf 2023 발표 자료** – 최신 기능(Concurrent Mode, Server Components) 정리.
---
> **요약**
React는 **컴포넌트 기반** UI 개발을 위한 현대적인 라이브러리이며, **Virtual DOM**, **Hook**, **Concurrent Mode** 등 혁신적인 기술을 통해 대규모 웹 애플리케이션을 효율적으로 구축할 수 있다. 풍부한 생태계와 활발한 커뮤니티 덕분에 초보자부터 기업 수준까지 널리 활용되고 있다.