React

작성자

익명

작성일

2026.03.02

조회수

버전

📋 문서 버전

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

React

개요

React(리액트)는 페이스북(현 메타)에서 개발한 오픈소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 구성 요소(Component) 단위로 선언적으로 만들 수 있게 해준다. 2013년에 처음 공개된 이후 현재는 웹·모바일·데스크톱 등 다양한 플랫폼에서 사용되며, React Native를 통해 네이티브 모바일 앱도 개발할 수 있다.

React는 Virtual DOM(가상 DOM)과 단방향 데이터 흐름을 기반으로 하여, 복잡한 UI를 효율적으로 업데이트하고 유지보수하기 쉬운 구조를 제공한다.

주요 특징

특징	설명	장점
선언적 UI	UI를 현재 상태에 맞게 선언만 하면 React가 자동으로 DOM을 업데이트	코드 가독성·버그 감소
컴포넌트 기반	UI를 재사용 가능한 작은 단위(컴포넌트)로 분리	재사용성·테스트 용이
Virtual DOM	실제 DOM과 동기화하기 전에 메모리 상에 가상 트리를 만든 뒤 최소 변경만 적용	렌더링 성능 향상
단방향 데이터 흐름	Props(속성) → 자식, State(상태) → 자체 업데이트	데이터 흐름 추적이 쉬워 디버깅 용이
풍부한 생태계	라우팅, 상태관리, 서버 사이드 렌더링 등 다양한 부가 도구 존재	프로젝트 규모에 맞는 선택 가능

핵심 개념

1. JSX

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에 HTML과 비슷한 문법을 삽입할 수 있게 해준다. Babel 같은 트랜스파일러가 JSX를 React.createElement 호출 형태로 변환한다.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

주의: JSX는 순수 JavaScript가 아니므로 빌드 단계에서 반드시 변환해야 한다.

2. 컴포넌트 종류

종류	선언 방식	주요 특징
함수형 컴포넌트	`function` 혹은 화살표 함수	Hook 사용 가능, 간결, 클래스보다 권장
클래스형 컴포넌트	`class extends React.Component`	`this.state`, 생명주기 메서드 사용, 레거시 코드에 주로 존재

함수형 컴포넌트 예시

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 상태 선언

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // count가 바뀔 때마다 실행

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>증가</button>
    </div>
  );
}

클래스형 컴포넌트 예시

import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}

3. State와 Props

구분	의미	변경 주체
State	컴포넌트 내부에서 관리되는 동적인 데이터	컴포넌트 자체 (`setState` 혹은 Hook)
Props	부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터	부모 컴포넌트

State는 useState, useReducer 등 Hook을 통해 선언하고, Props는 JSX 속성으로 전달한다.

4. Hook

Hook은 함수형 컴포넌트에서 React의 상태·생명주기·컨텍스트 기능을 사용할 수 있게 하는 API이다. 주요 Hook은 다음과 같다.

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

5. 컴포넌트 생명주기 (클래스형)

단계	메서드	설명
마운트	`constructor`, `static getDerivedStateFromProps`, `render`, `componentDidMount`	최초 렌더링 후 실행
업데이트	`static getDerivedStateFromProps`, `shouldComponentUpdate`, `render`, `getSnapshotBeforeUpdate`, `componentDidUpdate`	Props·State 변동 시 실행
언마운트	`componentWillUnmount`	컴포넌트가 DOM에서 제거될 때 실행

함수형 컴포넌트에서는 useEffect의 의존성 배열을 통해 동일한 흐름을 구현한다.

React 생태계

라우팅 – React Router

SPA(싱글 페이지 애플리케이션)에서 URL 기반 화면 전환을 담당한다. BrowserRouter, Routes, Route 컴포넌트를 사용한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

상태 관리 – Redux, Recoil, Zustand 등

Redux: 전역 상태를 단일 Store에 저장하고, action·reducer 패턴으로 업데이트한다.
Recoil: React의 atom·selector 개념을 이용해 간단히 전역 상태를 정의한다.
Zustand: 최소 설정으로 hook 기반 상태 관리를 제공한다.

서버 사이드 렌더링(SSR) – Next.js, Remix

SSR은 초기 페이지 로드 시 서버에서 HTML을 미리 생성해 SEO와 첫 화면 속도를 개선한다. Next.js는 파일 기반 라우팅, 정적 페이지 생성(SSG), API 라우트 등을 기본 제공한다.

정적 사이트 생성(SSG) – Gatsby, Astro

빌드 시점에 모든 페이지를 HTML로 변환해 CDN 배포가 용이하도록 한다. GraphQL 기반 데이터 연동이 특징인 Gatsby가 대표적이다.

개발 환경 설정

1. 프로젝트 생성

툴	명령	특징
Create React App (CRA)	`npx create-react-app my-app`	설정이 거의 필요 없는 기본 템플릿
Vite	`npm create vite@latest my-app -- --template react`	빠른 HMR(핫 모듈 교체)·경량 설정
Next.js	`npx create-next-app@latest my-app`	SSR·SSG·API 라우트 기본 제공

2. 기본 파일 구조 (CRA 예시)

my-app/
├─ public/          # 정적 파일 (index.html, favicon 등)
├─ src/
│  ├─ assets/       # 이미지·스타일 등
│  ├─ components/   # 재사용 가능한 UI 컴포넌트
│  ├─ pages/        # 라우팅에 대응하는 페이지 컴포넌트
│  ├─ hooks/        # 커스텀 Hook
│  ├─ App.jsx
│  └─ index.jsx
├─ package.json
└─ vite.config.js (or react-scripts)

3. 빌드·배포

개발 서버: npm start (CRA) / npm run dev (Vite) – HMR 지원.
프로덕션 빌드: npm run build – dist/ 혹은 build/ 폴더에 최적화된 정적 파일 생성.
배포: Netlify, Vercel, GitHub Pages, AWS Amplify 등 정적 호스팅 서비스에 업로드한다.

성능 최적화

1. 메모이제이션

기법	설명	사용 시점
`React.memo`	props가 변하지 않으면 컴포넌트 재렌더링 방지	순수 UI 컴포넌트
`useMemo`	연산 비용이 큰 값을 메모이제이션	복잡한 계산 결과
`useCallback`	함수 인스턴스 재생성을 방지	자식에게 콜백 전달 시

const ExpensiveComponent = React.memo(({ data }) => {
  // data가 변하지 않으면 재렌더링 안 함
});

2. 코드 스플리팅

React.lazy와 Suspense를 이용해 라우트 단위 혹은 컴포넌트 단위로 동적 import를 수행한다.

import { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./pages/Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

3. 렌더링 최적화 팁

불변성 유지: setState(prev => ({ ...prev, newProp }))처럼 새 객체를 반환해 React가 변화를 감지하도록 한다.
키(key) 사용: 리스트 렌더링 시 고유하고 안정적인 key를 지정해 diff 알고리즘을 효율화한다.
불필요한 Context 사용 지양: 전역 상태가 자주 바뀌면 하위 모든 컴포넌트가 리렌더링될 위험이 있다.

베스트 프랙티스

함수형 컴포넌트와 Hook을 기본으로 사용하고, 클래스형은 레거시 유지보수에만 제한한다.
컴포넌트는 한 가지 책임(Single Responsibility Principle)을 갖도록 설계한다.
스타일링은 CSS Modules, Styled Components, Emotion 등 CSS-in-JS 혹은 Scoped CSS를 활용해 전역 충돌을 방지한다.
타입스크립트와 함께 사용하면 컴파일 단계에서 prop·state 오류를 사전에 차단할 수 있다.
테스트는 Jest와 React Testing Library로 컴포넌트 단위(Unit)·통합(Integration) 테스트를 수행한다.

참고 자료

구분	링크	비고
공식 문서	https://react.dev/	최신 API·가이드
React Hook 공식 가이드	https://react.dev/learn/hooks-intro	Hook 사용법 상세
React Router Docs	https://reactrouter.com/	라우팅 최신 버전
Redux Toolkit	https://redux-toolkit.js.org/	Redux 권장 설정
Next.js Docs	https://nextjs.org/docs	SSR·SSG 활용 가이드
Vite + React	https://vitejs.dev/guide/#scaffolding-your-first-vite-project	빠른 개발 환경 구축
TypeScript + React	https://www.typescriptlang.org/docs/handbook/react.html	타입스크립트 연동 예시

이 문서는 2026년 현재 React 19.x 버전을 기준으로 작성되었습니다. 최신 버전에서는 일부 API가 추가·변경될 수 있으니 공식 문서를 항상 확인하시기 바랍니다.

📝 마크다운 원본

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

# React  

## 개요  
React(리액트)는 **페이스북(현 메타)에서 개발**한 오픈소스 JavaScript 라이브러리로, 사용자 인터페이스(UI)를 **구성 요소(Component)** 단위로 선언적으로 만들 수 있게 해준다. 2013년에 처음 공개된 이후 현재는 웹·모바일·데스크톱 등 다양한 플랫폼에서 사용되며, **React Native**를 통해 네이티브 모바일 앱도 개발할 수 있다.  

React는 **Virtual DOM**(가상 DOM)과 **단방향 데이터 흐름**을 기반으로 하여, 복잡한 UI를 효율적으로 업데이트하고 유지보수하기 쉬운 구조를 제공한다.  

---

## 주요 특징  

| 특징 | 설명 | 장점 |
|------|------|------|
| **선언적 UI** | UI를 현재 상태에 맞게 선언만 하면 React가 자동으로 DOM을 업데이트 | 코드 가독성·버그 감소 |
| **컴포넌트 기반** | UI를 재사용 가능한 작은 단위(컴포넌트)로 분리 | 재사용성·테스트 용이 |
| **Virtual DOM** | 실제 DOM과 동기화하기 전에 메모리 상에 가상 트리를 만든 뒤 최소 변경만 적용 | 렌더링 성능 향상 |
| **단방향 데이터 흐름** | Props(속성) → 자식, State(상태) → 자체 업데이트 | 데이터 흐름 추적이 쉬워 디버깅 용이 |
| **풍부한 생태계** | 라우팅, 상태관리, 서버 사이드 렌더링 등 다양한 부가 도구 존재 | 프로젝트 규모에 맞는 선택 가능 |

---

## 핵심 개념  

### 1. JSX  
JSX는 **JavaScript XML**의 약자로, JavaScript 코드 안에 HTML과 비슷한 문법을 삽입할 수 있게 해준다. Babel 같은 트랜스파일러가 JSX를 `React.createElement` 호출 형태로 변환한다.  

```jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
```

> **주의**: JSX는 순수 JavaScript가 아니므로 빌드 단계에서 반드시 변환해야 한다.

### 2. 컴포넌트 종류  

| 종류 | 선언 방식 | 주요 특징 |
|------|-----------|-----------|
| **함수형 컴포넌트** | `function` 혹은 화살표 함수 | Hook 사용 가능, 간결, 클래스보다 권장 |
| **클래스형 컴포넌트** | `class extends React.Component` | `this.state`, 생명주기 메서드 사용, 레거시 코드에 주로 존재 |

#### 함수형 컴포넌트 예시  

```jsx
import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 상태 선언

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // count가 바뀔 때마다 실행

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>증가</button>
    </div>
  );
}
```

#### 클래스형 컴포넌트 예시  

```jsx
import React from "react";

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>현재 카운트: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          증가
        </button>
      </div>
    );
  }
}
```

### 3. State와 Props  

| 구분 | 의미 | 변경 주체 |
|------|------|-----------|
| **State** | 컴포넌트 내부에서 관리되는 **동적인 데이터** | 컴포넌트 자체 (`setState` 혹은 Hook) |
| **Props** | 부모 컴포넌트가 자식에게 전달하는 **읽기 전용 데이터** | 부모 컴포넌트 |

State는 `useState`, `useReducer` 등 Hook을 통해 선언하고, Props는 JSX 속성으로 전달한다.

### 4. Hook  
Hook은 **함수형 컴포넌트에서** React의 상태·생명주기·컨텍스트 기능을 사용할 수 있게 하는 API이다. 주요 Hook은 다음과 같다.

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

### 5. 컴포넌트 생명주기 (클래스형)  

| 단계 | 메서드 | 설명 |
|------|--------|------|
| **마운트** | `constructor`, `static getDerivedStateFromProps`, `render`, `componentDidMount` | 최초 렌더링 후 실행 |
| **업데이트** | `static getDerivedStateFromProps`, `shouldComponentUpdate`, `render`, `getSnapshotBeforeUpdate`, `componentDidUpdate` | Props·State 변동 시 실행 |
| **언마운트** | `componentWillUnmount` | 컴포넌트가 DOM에서 제거될 때 실행 |

함수형 컴포넌트에서는 `useEffect`의 의존성 배열을 통해 동일한 흐름을 구현한다.

---

## React 생태계  

### 라우팅 – React Router  
SPA(싱글 페이지 애플리케이션)에서 URL 기반 화면 전환을 담당한다. `BrowserRouter`, `Routes`, `Route` 컴포넌트를 사용한다.

```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>
  );
}
```

### 상태 관리 – Redux, Recoil, Zustand 등  
- **Redux**: 전역 상태를 **단일 Store**에 저장하고, `action`·`reducer` 패턴으로 업데이트한다.  
- **Recoil**: React의 **atom**·**selector** 개념을 이용해 간단히 전역 상태를 정의한다.  
- **Zustand**: 최소 설정으로 **hook 기반** 상태 관리를 제공한다.

### 서버 사이드 렌더링(SSR) – Next.js, Remix  
SSR은 초기 페이지 로드 시 서버에서 HTML을 미리 생성해 SEO와 첫 화면 속도를 개선한다. Next.js는 파일 기반 라우팅, 정적 페이지 생성(SSG), API 라우트 등을 기본 제공한다.

### 정적 사이트 생성(SSG) – Gatsby, Astro  
빌드 시점에 모든 페이지를 HTML로 변환해 CDN 배포가 용이하도록 한다. GraphQL 기반 데이터 연동이 특징인 Gatsby가 대표적이다.

---

## 개발 환경 설정  

### 1. 프로젝트 생성  

| 툴 | 명령 | 특징 |
|----|------|------|
| **Create React App (CRA)** | `npx create-react-app my-app` | 설정이 거의 필요 없는 기본 템플릿 |
| **Vite** | `npm create vite@latest my-app -- --template react` | 빠른 HMR(핫 모듈 교체)·경량 설정 |
| **Next.js** | `npx create-next-app@latest my-app` | SSR·SSG·API 라우트 기본 제공 |

### 2. 기본 파일 구조 (CRA 예시)

```
my-app/
├─ public/          # 정적 파일 (index.html, favicon 등)
├─ src/
│  ├─ assets/       # 이미지·스타일 등
│  ├─ components/   # 재사용 가능한 UI 컴포넌트
│  ├─ pages/        # 라우팅에 대응하는 페이지 컴포넌트
│  ├─ hooks/        # 커스텀 Hook
│  ├─ App.jsx
│  └─ index.jsx
├─ package.json
└─ vite.config.js (or react-scripts)
```

### 3. 빌드·배포  

- **개발 서버**: `npm start` (CRA) / `npm run dev` (Vite) – HMR 지원.  
- **프로덕션 빌드**: `npm run build` – `dist/` 혹은 `build/` 폴더에 최적화된 정적 파일 생성.  
- **배포**: Netlify, Vercel, GitHub Pages, AWS Amplify 등 정적 호스팅 서비스에 업로드한다.  

---

## 성능 최적화  

### 1. 메모이제이션  

| 기법 | 설명 | 사용 시점 |
|------|------|-----------|
| `React.memo` | props가 변하지 않으면 컴포넌트 재렌더링 방지 | 순수 UI 컴포넌트 |
| `useMemo` | 연산 비용이 큰 값을 메모이제이션 | 복잡한 계산 결과 |
| `useCallback` | 함수 인스턴스 재생성을 방지 | 자식에게 콜백 전달 시 |

```jsx
const ExpensiveComponent = React.memo(({ data }) => {
  // data가 변하지 않으면 재렌더링 안 함
});
```

### 2. 코드 스플리팅  

- **React.lazy**와 **Suspense**를 이용해 라우트 단위 혹은 컴포넌트 단위로 **동적 import**를 수행한다.

```jsx
import { Suspense, lazy } from "react";

const Dashboard = lazy(() => import("./pages/Dashboard"));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}
```

### 3. 렌더링 최적화 팁  

- **불변성 유지**: `setState(prev => ({ ...prev, newProp }))`처럼 새 객체를 반환해 React가 변화를 감지하도록 한다.  
- **키(key) 사용**: 리스트 렌더링 시 고유하고 안정적인 `key`를 지정해 diff 알고리즘을 효율화한다.  
- **불필요한 Context 사용 지양**: 전역 상태가 자주 바뀌면 하위 모든 컴포넌트가 리렌더링될 위험이 있다.  

---

## 베스트 프랙티스  

1. **함수형 컴포넌트와 Hook을 기본으로** 사용하고, 클래스형은 레거시 유지보수에만 제한한다.  
2. **컴포넌트는 한 가지 책임**(Single Responsibility Principle)을 갖도록 설계한다.  
3. **스타일링**은 CSS Modules, Styled Components, Emotion 등 **CSS-in-JS** 혹은 **Scoped CSS**를 활용해 전역 충돌을 방지한다.  
4. **타입스크립트**와 함께 사용하면 컴파일 단계에서 **prop·state** 오류를 사전에 차단할 수 있다.  
5. **테스트**는 Jest와 React Testing Library로 **컴포넌트 단위(Unit)**·**통합(Integration)** 테스트를 수행한다.  

---

## 참고 자료  

| 구분 | 링크 | 비고 |
|------|------|------|
| 공식 문서 | https://react.dev/ | 최신 API·가이드 |
| React Hook 공식 가이드 | https://react.dev/learn/hooks-intro | Hook 사용법 상세 |
| React Router Docs | https://reactrouter.com/ | 라우팅 최신 버전 |
| Redux Toolkit | https://redux-toolkit.js.org/ | Redux 권장 설정 |
| Next.js Docs | https://nextjs.org/docs | SSR·SSG 활용 가이드 |
| Vite + React | https://vitejs.dev/guide/#scaffolding-your-first-vite-project | 빠른 개발 환경 구축 |
| TypeScript + React | https://www.typescriptlang.org/docs/handbook/react.html | 타입스크립트 연동 예시 |

---  

*이 문서는 2026년 현재 React 19.x 버전을 기준으로 작성되었습니다. 최신 버전에서는 일부 API가 추가·변경될 수 있으니 공식 문서를 항상 확인하시기 바랍니다.*

AI 생성 콘텐츠 안내

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

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

위키너와나

React

📋 문서 버전

React

개요

주요 특징

핵심 개념

1. JSX

2. 컴포넌트 종류

함수형 컴포넌트 예시

클래스형 컴포넌트 예시

3. State와 Props

4. Hook

5. 컴포넌트 생명주기 (클래스형)

React 생태계

라우팅 – React Router

상태 관리 – Redux, Recoil, Zustand 등

서버 사이드 렌더링(SSR) – Next.js, Remix

정적 사이트 생성(SSG) – Gatsby, Astro

개발 환경 설정

1. 프로젝트 생성

2. 기본 파일 구조 (CRA 예시)

3. 빌드·배포

성능 최적화

1. 메모이제이션

2. 코드 스플리팅

3. 렌더링 최적화 팁

베스트 프랙티스

참고 자료

📝 마크다운 원본

🤔 AI의 사고 과정

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