React

작성자

익명

작성일

2026.03.02

조회수

버전

📋 문서 버전

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

React

개요

React(리액트)는 페이스북(현 메타)에서 개발한 오픈소스 자바스크립트 라이브러리로, 사용자 인터페이스(UI)를 효율적으로 구축하기 위해 설계되었습니다. 선언형(Declarative) 방식과 컴포넌트 기반(Component‑Based) 구조를 핵심으로 하며, 단일 페이지 애플리케이션(SPA)뿐 아니라 복합적인 웹·모바일 애플리케이션 개발에 널리 활용됩니다.

React는 Virtual DOM(가상 DOM) 을 사용해 실제 DOM 업데이트를 최소화하고, 재사용 가능한 UI 컴포넌트를 통해 코드 유지보수성을 높입니다. 현재는 React DOM, React Native, React Server Components 등 다양한 파생 프로젝트와 풍부한 에코시스템을 갖추고 있습니다.

역사와 배경

연도	주요 사건
2011	페이스북 내부 프로젝트 “FaxJS”에서 영감을 받아 React 초기 버전 발표
2013	오픈소스 공개, JSX(JavaScript XML) 도입으로 UI 선언을 직관화
2015	React Native 발표 – iOS·Android 네이티브 앱 개발 지원
2017	React Fiber(새로운 렌더링 엔진) 도입 – 비동기 렌더링 및 성능 개선
2019	Hooks 정식 도입 – 함수형 컴포넌트에서도 상태·부수 효과 관리 가능
2022	React Server Components 베타 공개 – 서버 사이드에서 UI 조각을 미리 렌더링

React는 Declarative UI와 Component Reusability라는 두 축을 중심으로 성장했으며, 현재 전 세계 수많은 기업·프로젝트에서 핵심 프레임워크로 채택되고 있습니다.

핵심 개념

컴포넌트

React 애플리케이션은 컴포넌트라는 독립적인 UI 단위들의 조합으로 구성됩니다. 컴포넌트는 크게 함수형(Function Component) 과 클래스형(Class Component) 로 나뉩니다.

구분	특징	사용 권장도
함수형	`function` 혹은 화살표 함수 형태, Hooks 사용 가능, 간결함	★★★★★
클래스형	`class extends React.Component`, `this.state`와 `this.setState` 사용, 레거시 코드 유지에 필요	★★☆☆☆

Tip: 신규 프로젝트에서는 함수형 컴포넌트를 기본으로 사용하고, 기존 레거시에서는 점진적으로 마이그레이션하는 것이 일반적입니다.

예시 – 함수형 컴포넌트

import React from 'react';

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

Props와 State

Props(프로퍼티): 부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터. 컴포넌트 재사용성을 높이는 핵심 메커니즘입니다.
State(상태): 컴포넌트 내부에서 변경 가능한 데이터를 관리합니다. setState(클래스) 혹은 useState(함수형)으로 업데이트합니다.

Props와 State 차이

구분	Props	State
소유자	부모 컴포넌트	해당 컴포넌트 자체
변경 가능성	불변(읽기 전용)	가변(업데이트 가능)
목적	데이터 전달·구성	UI 동적 변화 관리

Lifecycle(생명주기)

클래스형 컴포넌트에서는 생명주기 메서드를 통해 컴포넌트가 마운트·업데이트·언마운트되는 시점을 제어합니다.

단계	메서드 (클래스)	대응 Hook (함수형)
마운트	`constructor`, `componentDidMount`	`useEffect(() => {...}, [])`
업데이트	`componentDidUpdate`	`useEffect(() => {...}, [deps])`
언마운트	`componentWillUnmount`	`useEffect(() => return () => {...}, [])`

Hooks

Hooks는 함수형 컴포넌트에서 상태·부수 효과·컨텍스트 등을 사용할 수 있게 해주는 API 집합입니다. 주요 Hook을 소개합니다.

Hook	용도	사용 예시
`useState`	로컬 상태 관리	`const [count, setCount] = useState(0);`
`useEffect`	부수 효과(데이터 fetch, 구독 등)	`useEffect(() => { fetchData(); }, []);`
`useContext`	전역 컨텍스트 접근	`const theme = useContext(ThemeContext);`
`useMemo`	연산 결과 메모이제이션	`const memoized = useMemo(() => heavyCalc(val), [val]);`
`useCallback`	콜백 함수 메모이제이션	`const handler = useCallback(() => {...}, [deps]);`
`useRef`	DOM 엘리먼트 혹은 값 저장(렌더링 간 유지)	`const inputRef = useRef(null);`
`useReducer`	복잡한 상태 로직 관리(Redux와 유사)	`const [state, dispatch] = useReducer(reducer, init);`

주의: Hook은 컴포넌트 최상위에서만 호출해야 하며, 조건문·루프 안에서는 사용할 수 없습니다(규칙 위반 시 오류 발생).

React 에코시스템

React Router

SPA에서 라우팅을 담당하는 공식 라이브러리입니다. URL에 따라 다른 컴포넌트를 매핑하고, 동적 라우트 파라미터, 중첩 라우트, 코드 스플리팅 등을 지원합니다.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  );
}

상태 관리 라이브러리

React 자체 useState·useReducer 외에도 복잡한 전역 상태를 다루기 위한 도구가 존재합니다.

라이브러리	특징
Redux	전역 상태를 스토어에 저장, 액션·리듀서 패턴, 미들웨어(`redux-thunk`, `redux-saga`) 지원
MobX	관찰 가능한(observable) 데이터 기반, 선언형 반응성
Zustand	가벼운 훅 기반 스토어, API가 간결
Recoil	페이스북이 만든 실험적 상태 관리, atom·selector 개념

빌드·번들링 도구

React 프로젝트는 보통 Webpack, Vite, Parcel 등으로 번들링합니다. 최근에는 Vite가 빠른 개발 서버와 HMR(Hot Module Replacement) 지원으로 인기가 높습니다.

도구	주요 장점
Create React App (CRA)	설정 없이 바로 시작, Babel·Webpack 자동 구성
Next.js	서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅
Gatsby	정적 사이트에 최적화, GraphQL 데이터 레이어
Vite	초고속 개발 서버, ES 모듈 기반 빌드

코드 예시

기본 Counter 컴포넌트 (Hooks 사용)

import React, { useState } from "react";

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

  // 클릭 시 count 증가
  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

  return (
    <div style={{ textAlign: "center" }}>
      <h2>Counter</h2>
      <p>Current: {count}</p>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default Counter;

API 호출 예시 (useEffect + async/await)

import React, { useEffect, useState } from "react";

function UsersList() {
  const [users, setUsers] = useState<Array<{ id: number; name: string }>>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 비동기 함수 정의 후 즉시 호출
    const fetchUsers = async () => {
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await res.json();
        setUsers(data);
      } catch (e) {
        console.error(e);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []); // 빈 배열 → 마운트 시 한 번 실행

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;

베스트 프랙티스

컴포넌트는 한 가지 책임만
UI 조각을 작게 쪼개고, 재사용성을 높이세요.
함수형 컴포넌트와 Hooks를 기본으로
클래스형은 레거시 유지보수에만 제한적으로 사용합니다.
불변성(Immutable) 유지
상태 업데이트 시 기존 객체를 복제(...spread)하고 새 객체를 반환합니다.
렌더링 최적화
React.memo(컴포넌트 메모이제이션), useMemo, useCallback을 적절히 활용합니다.
타입스크립트와 함께 사용
PropTypes 대신 TypeScript 인터페이스/타입을 정의하면 컴파일 단계에서 오류를 잡을 수 있습니다.
코드 스플리팅
React.lazy와 Suspense로 라우트 별 청크를 분리해 초기 로드 속도를 개선합니다.
접근성(Accessibility) 고려
ARIA 속성, 키보드 네비게이션, 의미 있는 HTML 태그 사용을 권장합니다.

비교·대안

프레임워크/라이브러리	주요 특징	장점	단점
Vue.js	옵션 API·Composition API, 템플릿 기반	학습 곡선이 완만, 문서가 친절	커뮤니티 규모가 React보다 작음
Angular	완전한 프레임워크, TypeScript 기반	엔터프라이즈 수준 구조 제공	무거운 런타임, 복잡한 설정
Svelte	컴파일 타임에 최적화, 런타임 최소	매우 빠른 초기 로드	생태계·플러그인 부족
Preact	React API 호환, 경량(≈3KB)	작은 번들 사이즈	일부 고급 기능 미지원

React는 생태계·도구·커뮤니티 규모가 가장 크며, 대규모 프로젝트와 기업 환경에 최적화된 선택지입니다.

참고 자료

공식 문서: https://reactjs.org/
React 공식 블로그: https://reactjs.org/blog/
React Router Docs: https://reactrouter.com/
Redux Toolkit: https://redux-toolkit.js.org/
TypeScript와 React: https://www.typescriptlang.org/docs/handbook/react.html
React Design Patterns (책) – Michael Chan 저

이 문서는 2026년 현재 최신 React 버전(18.x) 기준으로 작성되었습니다. 새로운 API가 추가되거나 기존 API가 폐기될 경우 공식 문서를 통해 최신 정보를 확인하시기 바랍니다.

📝 마크다운 원본

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

# React

## 개요
**React**(리액트)는 페이스북(현 메타)에서 개발한 오픈소스 **자바스크립트 라이브러리**로, 사용자 인터페이스(UI)를 효율적으로 구축하기 위해 설계되었습니다. 선언형(Declarative) 방식과 **컴포넌트 기반(Component‑Based)** 구조를 핵심으로 하며, 단일 페이지 애플리케이션(SPA)뿐 아니라 복합적인 웹·모바일 애플리케이션 개발에 널리 활용됩니다.  

React는 **Virtual DOM(가상 DOM)** 을 사용해 실제 DOM 업데이트를 최소화하고, **재사용 가능한 UI 컴포넌트**를 통해 코드 유지보수성을 높입니다. 현재는 **React DOM**, **React Native**, **React Server Components** 등 다양한 파생 프로젝트와 풍부한 에코시스템을 갖추고 있습니다.

---

## 목차
1. [역사와 배경](#역사와-배경)  
2. [핵심 개념](#핵심-개념)  
   - [컴포넌트](#컴포넌트)  
   - [Props와 State](#props와-state)  
   - [Lifecycle(생명주기)](#lifecycle생명주기)  
   - [Hooks](#hooks)  
3. [React 에코시스템](#react-에코시스템)  
   - [React Router](#react-router)  
   - [Redux & Zustand 등 상태 관리 라이브러리](#상태-관리-라이브러리)  
   - [빌드·번들링 도구](#빌드·번들링-도구)  
4. [코드 예시](#코드-예시)  
5. [베스트 프랙티스](#베스트-프랙티스)  
6. [비교·대안](#비교·대안)  
7. [참고 자료](#참고-자료)  

---

## 역사와 배경
| 연도 | 주요 사건 |
|------|-----------|
| **2011** | 페이스북 내부 프로젝트 “FaxJS”에서 영감을 받아 **React** 초기 버전 발표 |
| **2013** | 오픈소스 공개, **JSX**(JavaScript XML) 도입으로 UI 선언을 직관화 |
| **2015** | **React Native** 발표 – iOS·Android 네이티브 앱 개발 지원 |
| **2017** | **React Fiber**(새로운 렌더링 엔진) 도입 – 비동기 렌더링 및 성능 개선 |
| **2019** | **Hooks** 정식 도입 – 함수형 컴포넌트에서도 상태·부수 효과 관리 가능 |
| **2022** | **React Server Components** 베타 공개 – 서버 사이드에서 UI 조각을 미리 렌더링 |

React는 **Declarative UI**와 **Component Reusability**라는 두 축을 중심으로 성장했으며, 현재 전 세계 수많은 기업·프로젝트에서 핵심 프레임워크로 채택되고 있습니다.

---

## 핵심 개념

### 컴포넌트
React 애플리케이션은 **컴포넌트**라는 독립적인 UI 단위들의 조합으로 구성됩니다. 컴포넌트는 크게 **함수형(Function Component)** 과 **클래스형(Class Component)** 로 나뉩니다.

| 구분 | 특징 | 사용 권장도 |
|------|------|--------------|
| **함수형** | `function` 혹은 화살표 함수 형태, Hooks 사용 가능, 간결함 | ★★★★★ |
| **클래스형** | `class extends React.Component`, `this.state`와 `this.setState` 사용, 레거시 코드 유지에 필요 | ★★☆☆☆ |

> **Tip**: 신규 프로젝트에서는 함수형 컴포넌트를 기본으로 사용하고, 기존 레거시에서는 점진적으로 마이그레이션하는 것이 일반적입니다.

#### 예시 – 함수형 컴포넌트
```tsx
import React from 'react';

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;
```

### Props와 State
- **Props(프로퍼티)**: 부모 컴포넌트가 자식에게 전달하는 **읽기 전용 데이터**. 컴포넌트 재사용성을 높이는 핵심 메커니즘입니다.
- **State(상태)**: 컴포넌트 내부에서 **변경 가능한 데이터**를 관리합니다. `setState`(클래스) 혹은 `useState`(함수형)으로 업데이트합니다.

#### Props와 State 차이
| 구분 | Props | State |
|------|-------|-------|
| **소유자** | 부모 컴포넌트 | 해당 컴포넌트 자체 |
| **변경 가능성** | 불변(읽기 전용) | 가변(업데이트 가능) |
| **목적** | 데이터 전달·구성 | UI 동적 변화 관리 |

### Lifecycle(생명주기)
클래스형 컴포넌트에서는 **생명주기 메서드**를 통해 컴포넌트가 마운트·업데이트·언마운트되는 시점을 제어합니다.

| 단계 | 메서드 (클래스) | 대응 Hook (함수형) |
|------|----------------|-------------------|
| **마운트** | `constructor`, `componentDidMount` | `useEffect(() => {...}, [])` |
| **업데이트** | `componentDidUpdate` | `useEffect(() => {...}, [deps])` |
| **언마운트** | `componentWillUnmount` | `useEffect(() => return () => {...}, [])` |

### Hooks
**Hooks**는 함수형 컴포넌트에서 **상태·부수 효과·컨텍스트** 등을 사용할 수 있게 해주는 API 집합입니다. 주요 Hook을 소개합니다.

| Hook | 용도 | 사용 예시 |
|------|------|-----------|
| `useState` | 로컬 상태 관리 | `const [count, setCount] = useState(0);` |
| `useEffect` | 부수 효과(데이터 fetch, 구독 등) | `useEffect(() => { fetchData(); }, []);` |
| `useContext` | 전역 컨텍스트 접근 | `const theme = useContext(ThemeContext);` |
| `useMemo` | 연산 결과 메모이제이션 | `const memoized = useMemo(() => heavyCalc(val), [val]);` |
| `useCallback` | 콜백 함수 메모이제이션 | `const handler = useCallback(() => {...}, [deps]);` |
| `useRef` | DOM 엘리먼트 혹은 값 저장(렌더링 간 유지) | `const inputRef = useRef(null);` |
| `useReducer` | 복잡한 상태 로직 관리(Redux와 유사) | `const [state, dispatch] = useReducer(reducer, init);` |

> **주의**: Hook은 **컴포넌트 최상위**에서만 호출해야 하며, 조건문·루프 안에서는 사용할 수 없습니다(규칙 위반 시 오류 발생).

---

## React 에코시스템

### React Router
SPA에서 **라우팅**을 담당하는 공식 라이브러리입니다. URL에 따라 다른 컴포넌트를 매핑하고, **동적 라우트 파라미터**, **중첩 라우트**, **코드 스플리팅** 등을 지원합니다.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:id" element={<UserDetail />} />
      </Routes>
    </BrowserRouter>
  );
}
```

### 상태 관리 라이브러리
React 자체 `useState`·`useReducer` 외에도 복잡한 전역 상태를 다루기 위한 도구가 존재합니다.

| 라이브러리 | 특징 |
|------------|------|
| **Redux** | 전역 상태를 **스토어**에 저장, **액션**·**리듀서** 패턴, 미들웨어(`redux-thunk`, `redux-saga`) 지원 |
| **MobX** | 관찰 가능한(observable) 데이터 기반, 선언형 반응성 |
| **Zustand** | 가벼운 훅 기반 스토어, API가 간결 |
| **Recoil** | 페이스북이 만든 실험적 상태 관리, **atom**·**selector** 개념 |

### 빌드·번들링 도구
React 프로젝트는 보통 **Webpack**, **Vite**, **Parcel** 등으로 번들링합니다. 최근에는 **Vite**가 빠른 개발 서버와 HMR(Hot Module Replacement) 지원으로 인기가 높습니다.

| 도구 | 주요 장점 |
|------|-----------|
| **Create React App (CRA)** | 설정 없이 바로 시작, Babel·Webpack 자동 구성 |
| **Next.js** | 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅 |
| **Gatsby** | 정적 사이트에 최적화, GraphQL 데이터 레이어 |
| **Vite** | 초고속 개발 서버, ES 모듈 기반 빌드 |

---

## 코드 예시

### 기본 Counter 컴포넌트 (Hooks 사용)
```tsx
import React, { useState } from "react";

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

  // 클릭 시 count 증가
  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

  return (
    <div style={{ textAlign: "center" }}>
      <h2>Counter</h2>
      <p>Current: {count}</p>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </div>
  );
}

export default Counter;
```

### API 호출 예시 (useEffect + async/await)
```tsx
import React, { useEffect, useState } from "react";

function UsersList() {
  const [users, setUsers] = useState<Array<{ id: number; name: string }>>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 비동기 함수 정의 후 즉시 호출
    const fetchUsers = async () => {
      try {
        const res = await fetch("https://jsonplaceholder.typicode.com/users");
        const data = await res.json();
        setUsers(data);
      } catch (e) {
        console.error(e);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []); // 빈 배열 → 마운트 시 한 번 실행

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

export default UsersList;
```

---

## 베스트 프랙티스

1. **컴포넌트는 한 가지 책임만**  
   - UI 조각을 작게 쪼개고, 재사용성을 높이세요.  
2. **함수형 컴포넌트와 Hooks를 기본으로**  
   - 클래스형은 레거시 유지보수에만 제한적으로 사용합니다.  
3. **불변성(Immutable) 유지**  
   - 상태 업데이트 시 기존 객체를 복제(`...spread`)하고 새 객체를 반환합니다.  
4. **렌더링 최적화**  
   - `React.memo`(컴포넌트 메모이제이션), `useMemo`, `useCallback`을 적절히 활용합니다.  
5. **타입스크립트와 함께 사용**  
   - PropTypes 대신 TypeScript 인터페이스/타입을 정의하면 컴파일 단계에서 오류를 잡을 수 있습니다.  
6. **코드 스플리팅**  
   - `React.lazy`와 `Suspense`로 라우트 별 청크를 분리해 초기 로드 속도를 개선합니다.  
7. **접근성(Accessibility) 고려**  
   - ARIA 속성, 키보드 네비게이션, 의미 있는 HTML 태그 사용을 권장합니다.  

---

## 비교·대안

| 프레임워크/라이브러리 | 주요 특징 | 장점 | 단점 |
|----------------------|----------|------|------|
| **Vue.js** | 옵션 API·Composition API, 템플릿 기반 | 학습 곡선이 완만, 문서가 친절 | 커뮤니티 규모가 React보다 작음 |
| **Angular** | 완전한 프레임워크, TypeScript 기반 | 엔터프라이즈 수준 구조 제공 | 무거운 런타임, 복잡한 설정 |
| **Svelte** | 컴파일 타임에 최적화, 런타임 최소 | 매우 빠른 초기 로드 | 생태계·플러그인 부족 |
| **Preact** | React API 호환, 경량(≈3KB) | 작은 번들 사이즈 | 일부 고급 기능 미지원 |

React는 **생태계·도구·커뮤니티 규모**가 가장 크며, 대규모 프로젝트와 기업 환경에 최적화된 선택지입니다.

---

## 참고 자료
- **공식 문서**: https://reactjs.org/  
- **React 공식 블로그**: https://reactjs.org/blog/  
- **React Router Docs**: https://reactrouter.com/  
- **Redux Toolkit**: https://redux-toolkit.js.org/  
- **TypeScript와 React**: https://www.typescriptlang.org/docs/handbook/react.html  
- **React Design Patterns** (책) – Michael Chan 저  

> 이 문서는 2026년 현재 최신 React 버전(18.x) 기준으로 작성되었습니다. 새로운 API가 추가되거나 기존 API가 폐기될 경우 공식 문서를 통해 최신 정보를 확인하시기 바랍니다.

AI 생성 콘텐츠 안내

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

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

위키너와나

React

📋 문서 버전

React

개요

목차

역사와 배경

핵심 개념

컴포넌트

예시 – 함수형 컴포넌트

Props와 State

Props와 State 차이

Lifecycle(생명주기)

Hooks

React 에코시스템

React Router

상태 관리 라이브러리

빌드·번들링 도구

코드 예시

기본 Counter 컴포넌트 (Hooks 사용)

API 호출 예시 (useEffect + async/await)

베스트 프랙티스

비교·대안

참고 자료

📝 마크다운 원본

🤔 AI의 사고 과정

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