React

작성자

익명

작성일

2026.03.02

조회수

버전

React Virtual DOM Hooks Component 기반 UI JSX Concurrent Mode Next.js React Router Redux 중급

📋 문서 버전

이 문서는 8개의 버전이 있습니다. 현재 버전 5을 보고 있습니다.

React

개요

React(리액트)는 페이스북(현 메타)에서 2013년에 오픈소스로 공개한 자바스크립트 UI 라이브러리이다.
단일 페이지 애플리케이션(SPA)이나 복잡한 사용자 인터페이스를 컴포넌트 기반으로 선언적으로 구축할 수 있게 설계되었다.

React는 Virtual DOM(가상 DOM) 을 활용해 실제 DOM 조작을 최소화하고, 상태(state) 변화에 따라 효율적으로 UI를 업데이트한다. 이 때문에 성능과 개발 생산성이 크게 향상된다.

1. 역사와 배경

연도	주요 사건
2011	페이스북 내부 프로젝트 “FaxJS”로 시작
2013	오픈소스 공개 (BSD 라이선스)
2015	React Native 발표 – 모바일 앱 개발 지원
2017	Hooks 도입 – 함수형 컴포넌트에 상태·라이프사이클 제공
2020	Concurrent Mode(실험) 및 React Server Components 발표
2023	React 18 정식 출시 – 자동 배치, 트랜지션 등 새로운 기능 포함

React는 초기에는 페이스북 뉴스 피드와 인스타그램 웹에 적용되었으며, 이후 전 세계 수많은 기업·프로젝트에서 채택되고 있다.

2. 핵심 개념

2.1 컴포넌트(Component)

UI를 재사용 가능한 독립적인 단위로 나눈다.
- 클래스형 컴포넌트: extends React.Component 로 선언, render() 메서드 필요.
- 함수형 컴포넌트: 함수 자체가 컴포넌트이며, Hooks 로 상태·라이프사이클을 관리한다.

// 함수형 컴포넌트 예시
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Hook 사용
  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}
export default Counter;

2.2 JSX

JavaScript XML의 약자로, 자바스크립트 코드 안에 HTML‑like 문법을 삽입한다. Babel 등 트랜스파일러가 React.createElement 호출로 변환한다.

const element = <h1 className="title">Hello, React!</h1>;

2.3 Props와 State

구분	설명	변경 방법
Props	부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터	부모에서 전달, 자식은 `props.xxx` 로 접근
State	컴포넌트 내부에서 관리하는 변경 가능한 데이터	`setState`(클래스) / `[useState](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useState)`(함수) 로 업데이트

2.4 Hook

React 16.8부터 도입된 함수형 컴포넌트 전용 API이다. 주요 Hook은 다음과 같다.

Hook	역할	사용 예시
`useState`	로컬 상태 관리	`const [value, setValue] = useState(initial);`
`[useEffect](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useEffect)`	부수 효과(데이터 fetch, 구독 등)	`useEffect(() => { … }, [deps]);`
`[useContext](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useContext)`	Context API 사용	`const ctx = useContext(MyContext);`
`[useReducer](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useReducer)`	복잡한 상태 로직 관리	`const [state, dispatch] = useReducer(reducer, init);`
`[useMemo](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useMemo)`	연산 결과 메모이제이션	`const memoVal = useMemo(() => compute(a), [a]);`
`[useCallback](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useCallback)`	콜백 함수 메모이제이션	`const handler = useCallback(() => …, [deps]);`
`[useRef](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/useRef)`	DOM 엘리먼트 혹은 가변값 저장	`const ref = useRef(null);`

3. 아키텍처와 렌더링 흐름

렌더링 단계
컴포넌트 함수(또는 render)가 실행되어 React Element 트리를 반환한다.
반환된 트리는 Virtual DOM 형태로 메모리에 저장된다.
조정(Diff) 단계
이전 Virtual DOM과 새 Virtual DOM을 비교해 변경점(diff) 을 계산한다.
이 과정은 O(N) 에 가까운 효율성을 갖는다.
커밋 단계
계산된 변경점을 실제 DOM에 적용한다.
React는 배치(batch) 로 여러 업데이트를 한 번에 처리해 렌더링 횟수를 최소화한다.

※ 배치 : 여러 state 업데이트를 하나의 렌더 사이클에 모아 처리하는 기법. React 18에서는 자동 배치가 기본으로 적용된다.

4. 주요 라이브러리와 생태계

분야	대표 라이브러리	설명
라우팅	react-router	선언형 라우팅, 동적 매칭, 코드 스플리팅 지원
상태 관리	Redux, Recoil, Zustand, MobX	전역 상태를 효율적으로 관리
스타일링	styled-components, Emotion, CSS Modules	CSS‑in‑JS 혹은 모듈화된 스타일링
데이터 fetching	React Query, SWR, Apollo Client(GraphQL)	서버 데이터 캐시·동기화
테스트	Jest, React Testing Library, Enzyme	컴포넌트 단위 테스트와 스냅샷 테스트
빌드·배포	Create React App, Next.js, Vite, Webpack	프로젝트 초기화·SSR·정적 사이트 생성 등

특히 Next.js는 React 기반의 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG) 프레임워크로, SEO와 초기 로드 성능을 크게 개선한다.

5. 개발 환경 설정

프로젝트 초기화

   npx create-react-app my-app   # CRA (Create React App) 사용
   # 또는
   npm create vite@latest my-app -- --template react

필수 의존성
react, react-dom : 핵심 라이브러리
typescript (선택) : 타입 안전성 강화
eslint, prettier : 코드 품질 및 포맷팅

ESLint + Prettier 설정 예시 (.eslintrc.json)

   {
     "extends": ["react-app", "plugin:prettier/recommended"],
     "rules": {
       "react/react-in-jsx-scope": "off"
     }
   }

핫 모듈 교체(HMR)
Vite 혹은 CRA는 개발 서버에서 코드 변경 시 페이지 전체를 새로 고치지 않고 컴포넌트만 업데이트한다.

6. 성능 최적화

최적화 기법	적용 방법	효과
React.memo	함수형 컴포넌트를 메모이제이션	불필요한 재렌더링 방지
useMemo / useCallback	연산·함수 메모이제이션	의존성 변경 시에만 재계산
Lazy Loading	`[React.lazy](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%EA%B0%9C%EB%B0%9C/React.lazy)` + `[Suspense](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/%EC%9B%B9%EA%B0%9C%EB%B0%9C/Suspense)`	코드 스플리팅으로 초기 번들 크기 감소
Virtualization	`react-window`, `react-virtualized`	대량 리스트 렌더링 시 DOM 수 최소화
Concurrent Mode (React 18)	`createRoot` 사용, `startTransition`	UI 응답성 향상, 비동기 작업 우선순위 제어
SSR/SSG	Next.js 등	초기 페이지 로드 시 HTML을 미리 전달

주의: 과도한 memo 사용은 오히려 메모리·CPU 오버헤드를 증가시킬 수 있다. 프로파일링 도구(React DevTools → Profiler)로 실제 병목을 확인 후 적용한다.

7. 테스트 전략

단위 테스트 – Jest와 React Testing Library로 컴포넌트 로직 검증

   import { render, screen, fireEvent } from '@testing-library/react';
   import Counter from './Counter';

   test('버튼 클릭 시 카운트 증가', () => {
     render(<Counter />);
     fireEvent.click(screen.getByRole('button'));
     expect(screen.getByText(/클릭 횟수: 1/)).toBeInTheDocument();
   });

통합 테스트 – 여러 컴포넌트를 조합해 흐름 검증, msw(Mock Service Worker)로 API 모킹
E2E 테스트 – Cypress 혹은 Playwright 로 실제 브라우저 환경에서 사용자 시나리오 검증
스냅샷 테스트 – UI 변화를 감지하지만, 지나친 사용은 false positive를 초래한다.

8. 배포와 운영

단계	주요 작업	도구
빌드	`npm run build` → 최적화된 정적 파일 생성	CRA, Vite, Next.js (`next build`)
정적 호스팅	CDN에 배포, 캐시 설정	Vercel, Netlify, AWS S3 + CloudFront
SSR/SSG	서버에서 HTML 사전 렌더링	Next.js (`next start`), Remix
CI/CD	자동 테스트·빌드·배포 파이프라인	GitHub Actions, GitLab CI, CircleCI
모니터링	런타임 오류·성능 지표 수집	Sentry, LogRocket, New Relic

React 앱은 SPA 특성상 라우팅이 클라이언트에서 처리되므로, 서버 설정(rewrite 규칙)에서 모든 경로를 index.html 로 리다이렉트해야 한다.

9. 참고 자료

공식 문서: https://reactjs.org/
React 한국어 번역: https://ko.reactjs.org/
React Hook 공식 가이드: https://reactjs.org/docs/hooks-intro.html
React Performance: https://reactjs.org/docs/optimizing-performance.html
React Testing Library: https://testing-library.com/docs/react-testing-library/intro/
Next.js: https://nextjs.org/

요약
React는 컴포넌트 기반, 선언형 UI를 제공하는 현대 웹 개발의 핵심 도구다. Virtual DOM, Hook, Concurrent Mode 등 혁신적인 기능을 통해 생산성과 성능을 동시에 달성한다. 올바른 아키텍처 설계와 최적화, 테스트·배포 파이프라인을 갖춘다면 규모가 큰 프로젝트에서도 안정적인 유지보수가 가능하다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# React

## 개요
**React**(리액트)는 페이스북(현 메타)에서 2013년에 오픈소스로 공개한 **자바스크립트 UI 라이브러리**이다.  
단일 페이지 애플리케이션(SPA)이나 복잡한 사용자 인터페이스를 **컴포넌트 기반**으로 선언적으로 구축할 수 있게 설계되었다.  

React는 **Virtual DOM(가상 DOM)** 을 활용해 실제 DOM 조작을 최소화하고, 상태(state) 변화에 따라 효율적으로 UI를 업데이트한다. 이 때문에 **성능**과 **개발 생산성**이 크게 향상된다.

---

## 1. 역사와 배경
| 연도 | 주요 사건 |
|------|-----------|
| 2011 | 페이스북 내부 프로젝트 “FaxJS”로 시작 |
| 2013 | 오픈소스 공개 (BSD 라이선스) |
| 2015 | **React Native** 발표 – 모바일 앱 개발 지원 |
| 2017 | **Hooks** 도입 – 함수형 컴포넌트에 상태·라이프사이클 제공 |
| 2020 | **Concurrent Mode**(실험) 및 **React Server Components** 발표 |
| 2023 | React 18 정식 출시 – 자동 배치, 트랜지션 등 새로운 기능 포함 |

React는 초기에는 **페이스북 뉴스 피드**와 **인스타그램 웹**에 적용되었으며, 이후 전 세계 수많은 기업·프로젝트에서 채택되고 있다.

---

## 2. 핵심 개념
### 2.1 컴포넌트(Component)
UI를 **재사용 가능한 독립적인 단위**로 나눈다.  
- **클래스형 컴포넌트**: `extends React.Component` 로 선언, `render()` 메서드 필요.  
- **함수형 컴포넌트**: 함수 자체가 컴포넌트이며, **Hooks** 로 상태·라이프사이클을 관리한다.

```jsx
// 함수형 컴포넌트 예시
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Hook 사용
  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}
export default Counter;
```

### 2.2 JSX
**JavaScript XML**의 약자로, 자바스크립트 코드 안에 HTML‑like 문법을 삽입한다. Babel 등 트랜스파일러가 **React.createElement** 호출로 변환한다.

```jsx
const element = <h1 className="title">Hello, React!</h1>;
```

### 2.3 Props와 State
| 구분 | 설명 | 변경 방법 |
|------|------|-----------|
| **Props** | 부모 컴포넌트가 자식에게 전달하는 **읽기 전용** 데이터 | 부모에서 전달, 자식은 `props.xxx` 로 접근 |
| **State** | 컴포넌트 내부에서 관리하는 **변경 가능한** 데이터 | `setState`(클래스) / `useState`(함수) 로 업데이트 |

### 2.4 Hook
React 16.8부터 도입된 함수형 컴포넌트 전용 API이다. 주요 Hook은 다음과 같다.

| Hook | 역할 | 사용 예시 |
|------|------|-----------|
| `useState` | 로컬 상태 관리 | `const [value, setValue] = useState(initial);` |
| `useEffect` | 부수 효과(데이터 fetch, 구독 등) | `useEffect(() => { … }, [deps]);` |
| `useContext` | Context API 사용 | `const ctx = useContext(MyContext);` |
| `useReducer` | 복잡한 상태 로직 관리 | `const [state, dispatch] = useReducer(reducer, init);` |
| `useMemo` | 연산 결과 메모이제이션 | `const memoVal = useMemo(() => compute(a), [a]);` |
| `useCallback` | 콜백 함수 메모이제이션 | `const handler = useCallback(() => …, [deps]);` |
| `useRef` | DOM 엘리먼트 혹은 가변값 저장 | `const ref = useRef(null);` |

---

## 3. 아키텍처와 렌더링 흐름
1. **렌더링 단계**  
   - 컴포넌트 함수(또는 `render`)가 실행되어 **React Element** 트리를 반환한다.  
   - 반환된 트리는 **Virtual DOM** 형태로 메모리에 저장된다.

2. **조정(Diff) 단계**  
   - 이전 Virtual DOM과 새 Virtual DOM을 비교해 **변경점(diff)** 을 계산한다.  
   - 이 과정은 **O(N)** 에 가까운 효율성을 갖는다.

3. **커밋 단계**  
   - 계산된 변경점을 실제 DOM에 적용한다.  
   - React는 **배치(batch)** 로 여러 업데이트를 한 번에 처리해 렌더링 횟수를 최소화한다.

> **※ 배치** : 여러 state 업데이트를 하나의 렌더 사이클에 모아 처리하는 기법. React 18에서는 자동 배치가 기본으로 적용된다.

---

## 4. 주요 라이브러리와 생태계
| 분야 | 대표 라이브러리 | 설명 |
|------|----------------|------|
| 라우팅 | **react-router** | 선언형 라우팅, 동적 매칭, 코드 스플리팅 지원 |
| 상태 관리 | **Redux**, **Recoil**, **Zustand**, **MobX** | 전역 상태를 효율적으로 관리 |
| 스타일링 | **styled-components**, **Emotion**, **CSS Modules** | CSS‑in‑JS 혹은 모듈화된 스타일링 |
| 데이터 fetching | **React Query**, **SWR**, **Apollo Client**(GraphQL) | 서버 데이터 캐시·동기화 |
| 테스트 | **Jest**, **React Testing Library**, **Enzyme** | 컴포넌트 단위 테스트와 스냅샷 테스트 |
| 빌드·배포 | **Create React App**, **Next.js**, **Vite**, **Webpack** | 프로젝트 초기화·SSR·정적 사이트 생성 등 |

특히 **Next.js**는 React 기반의 **서버 사이드 렌더링(SSR)** 및 **정적 사이트 생성(SSG)** 프레임워크로, SEO와 초기 로드 성능을 크게 개선한다.

---

## 5. 개발 환경 설정
1. **프로젝트 초기화**  
   ```bash
   npx create-react-app my-app   # CRA (Create React App) 사용
   # 또는
   npm create vite@latest my-app -- --template react
   ```

2. **필수 의존성**  
   - `react`, `react-dom` : 핵심 라이브러리  
   - `typescript` (선택) : 타입 안전성 강화  
   - `eslint`, `prettier` : 코드 품질 및 포맷팅

3. **ESLint + Prettier 설정 예시 (`.eslintrc.json`)**
   ```json
   {
     "extends": ["react-app", "plugin:prettier/recommended"],
     "rules": {
       "react/react-in-jsx-scope": "off"
     }
   }
   ```

4. **핫 모듈 교체(HMR)**  
   Vite 혹은 CRA는 개발 서버에서 코드 변경 시 페이지 전체를 새로 고치지 않고 **컴포넌트만 업데이트**한다.

---

## 6. 성능 최적화
| 최적화 기법 | 적용 방법 | 효과 |
|------------|----------|------|
| **React.memo** | 함수형 컴포넌트를 메모이제이션 | 불필요한 재렌더링 방지 |
| **useMemo / useCallback** | 연산·함수 메모이제이션 | 의존성 변경 시에만 재계산 |
| **Lazy Loading** | `React.lazy` + `Suspense` | 코드 스플리팅으로 초기 번들 크기 감소 |
| **Virtualization** | `react-window`, `react-virtualized` | 대량 리스트 렌더링 시 DOM 수 최소화 |
| **Concurrent Mode** (React 18) | `createRoot` 사용, `startTransition` | UI 응답성 향상, 비동기 작업 우선순위 제어 |
| **SSR/SSG** | Next.js 등 | 초기 페이지 로드 시 HTML을 미리 전달 |

> **주의**: 과도한 `memo` 사용은 오히려 메모리·CPU 오버헤드를 증가시킬 수 있다. 프로파일링 도구(React DevTools → Profiler)로 실제 병목을 확인 후 적용한다.

---

## 7. 테스트 전략
1. **단위 테스트** – `Jest`와 `React Testing Library`로 컴포넌트 로직 검증  
   ```jsx
   import { render, screen, fireEvent } from '@testing-library/react';
   import Counter from './Counter';

   test('버튼 클릭 시 카운트 증가', () => {
     render(<Counter />);
     fireEvent.click(screen.getByRole('button'));
     expect(screen.getByText(/클릭 횟수: 1/)).toBeInTheDocument();
   });
   ```

2. **통합 테스트** – 여러 컴포넌트를 조합해 흐름 검증, `msw`(Mock Service Worker)로 API 모킹

3. **E2E 테스트** – `Cypress` 혹은 `Playwright` 로 실제 브라우저 환경에서 사용자 시나리오 검증

4. **스냅샷 테스트** – UI 변화를 감지하지만, 지나친 사용은 false positive를 초래한다.

---

## 8. 배포와 운영
| 단계 | 주요 작업 | 도구 |
|------|----------|------|
| **빌드** | `npm run build` → 최적화된 정적 파일 생성 | CRA, Vite, Next.js (`next build`) |
| **정적 호스팅** | CDN에 배포, 캐시 설정 | Vercel, Netlify, AWS S3 + CloudFront |
| **SSR/SSG** | 서버에서 HTML 사전 렌더링 | Next.js (`next start`), Remix |
| **CI/CD** | 자동 테스트·빌드·배포 파이프라인 | GitHub Actions, GitLab CI, CircleCI |
| **모니터링** | 런타임 오류·성능 지표 수집 | Sentry, LogRocket, New Relic |

React 앱은 **SPA** 특성상 라우팅이 클라이언트에서 처리되므로, 서버 설정(`rewrite` 규칙)에서 모든 경로를 `index.html` 로 리다이렉트해야 한다.

---

## 9. 참고 자료
- **공식 문서**: https://reactjs.org/  
- **React 한국어 번역**: https://ko.reactjs.org/  
- **React Hook 공식 가이드**: https://reactjs.org/docs/hooks-intro.html  
- **React Performance**: https://reactjs.org/docs/optimizing-performance.html  
- **React Testing Library**: https://testing-library.com/docs/react-testing-library/intro/  
- **Next.js**: https://nextjs.org/  

---

> **요약**  
React는 **컴포넌트 기반**, **선언형 UI**를 제공하는 현대 웹 개발의 핵심 도구다. Virtual DOM, Hook, Concurrent Mode 등 혁신적인 기능을 통해 **생산성**과 **성능**을 동시에 달성한다. 올바른 아키텍처 설계와 최적화, 테스트·배포 파이프라인을 갖춘다면 규모가 큰 프로젝트에서도 안정적인 유지보수가 가능하다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gpt-oss-120b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

React

📋 문서 버전

React

개요

1. 역사와 배경

2. 핵심 개념

2.1 컴포넌트(Component)

2.2 JSX

2.3 Props와 State

2.4 Hook

3. 아키텍처와 렌더링 흐름

4. 주요 라이브러리와 생태계

5. 개발 환경 설정

6. 성능 최적화

7. 테스트 전략

8. 배포와 운영

9. 참고 자료

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?