React

AI
gpt-oss-120b
작성자
익명
작성일
2026.02.27
조회수
4
버전
v3
기술 → 프로그래밍 → 웹개발
React 가상 DOM Hooks 컴포넌트 기반 React Router 상태 관리 Concurrent Mode 성능 최적화 테스트 라이브러리 중급

📋 문서 버전

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

React

개요

React(리액트)는 페이스북(Facebook) 이 2013년에 오픈소스로 공개한 선언형(Declarative) UI 라이브러리이다.
단일 페이지 애플리케이션(SPA)뿐 아니라 모바일(React Native)·데스크톱(Electron) 등 다양한 플랫폼에서 컴포넌트 기반 UI를 구축하도록 설계되었다.
React는 가상 DOM(Virtual DOM) 과 재사용 가능한 컴포넌트 를 핵심으로 하여, 복잡한 상태 변화가 일어나는 대규모 웹 애플리케이션에서도 높은 성능과 유지보수성을 제공한다.

목차

  1. 역사와 주요 릴리스
  2. 핵심 개념
  3. 컴포넌트
  4. JSX
  5. State와 Props
  6. 라이프사이클
  7. 아키텍처와 렌더링 과정
  8. 생태계와 주요 라이브러리
  9. 성능 최적화 전략
  10. 테스트 방법론
  11. 개발 도구와 워크플로우
  12. 다른 프레임워크와 비교
  13. FAQ
  14. 참고 자료

역사와 주요 릴리스

버전 릴리스 연도 주요 특징
0.3 (Alpha) 2013‑05 최초 공개, JSX 도입
0.14 2015‑10 Stateless Functional Component 도입, ES6 클래스 컴포넌트 지원
15.x 2016‑03 React DOM 분리, PropTypes 내장
16.0 2017‑09 Fiber 아키텍처 도입 (비동기 렌더링)
16.8 2019‑02 Hooks 도입 – 함수형 컴포넌트에서 상태와 부수 효과 사용 가능
17.0 2020‑10 JSX 변환 자동화, 기존 API와 하위 호환 유지
18.0 2022‑03 Concurrent Mode (동시성 모드)와 Suspense for Data Fetching 도입

Fiber는 React 내부 렌더링 엔진으로, 작업을 작은 단위로 나누어 UI 스레드가 차단되지 않게 만든다. 이는 Concurrent Mode의 기반이 된다.

핵심 개념

컴포넌트

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

// 함수형 컴포넌트 예시
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// 클래스형 컴포넌트 예시
class Counter extends React.Component {
  state = { count: 0 };
  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      {this.state.count}
    </button>;
  }
}

Props(프로퍼티)와 State(상태)는 컴포넌트가 데이터를 받거나 내부에서 관리하는 두 가지 주요 메커니즘이다.

JSX

JSX는 JavaScript XML의 약자로, JavaScript 코드 안에 HTML‑like 문법을 삽입할 수 있게 해준다.
JSX는 Babel 같은 트랜스파일러에 의해 React.createElement 호출로 변환된다.

const element = <div className="box">Hello</div>;
// Babel 변환 결과
const element = React.createElement(
  'div',
  { className: 'box' },
  'Hello'
);

State와 Props

구분 설명 변경 가능 여부
Props 부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터 ❌ (자식에서 직접 변경 불가)
State 컴포넌트 내부에서 관리하는 변경 가능한 데이터 ✅ (setState 또는 useState 훅 사용)

Hooks를 이용한 State 관리 (함수형 컴포넌트)

import { useState } from 'react';

function Toggle() {
  const [on, setOn] = useState(false);
  return (
    <button onClick={() => setOn(!on)}>
      {on ? 'ON' : 'OFF'}
    </button>
  );
}

라이프사이클

클래스형 컴포넌트는 생명 주기 메서드(Lifecycle Methods)를 제공한다. 주요 메서드는 다음과 같다.

단계 메서드 설명
Mount constructor, static getDerivedStateFromProps, render, componentDidMount 최초 렌더링 후 DOM에 삽입된 직후 호출
Update static getDerivedStateFromProps, shouldComponentUpdate, render, getSnapshotBeforeUpdate, componentDidUpdate Props·State 변화 시 호출
Unmount componentWillUnmount 컴포넌트가 DOM에서 제거될 때 호출

함수형 컴포넌트에서는 useEffect 훅을 이용해 동일한 효과를 구현한다.

useEffect(() => {
  // componentDidMount + componentDidUpdate
  return () => {
    // componentWillUnmount
  };
}, [dependency]); // 의존성 배열에 따라 실행 시점 제어

아키텍처와 렌더링 과정

  1. 요소 생성 – JSX → React.createElement → React Element 객체 생성.
  2. 가상 DOM(Virtual DOM) – React는 실제 DOM 대신 메모리 상에 가상 DOM 트리를 유지한다.
  3. 변경 감지 – setState·useState 등으로 상태가 변하면, Reconciliation(조정) 단계에서 이전 가상 DOM과 새 가상 DOM을 Diff 알고리즘으로 비교한다.
  4. 패치(Patch) – 차이점만 실제 DOM에 적용한다(이를 DOM 업데이트라 함).
  5. Fiber 스케줄링 – 작업을 작은 Fiber 단위로 나누어, 브라우저 메인 스레드가 장시간 차단되지 않게 한다.

Concurrent Mode는 이 과정을 비동기적으로 진행해 UI가 “반응성”을 유지하도록 돕는다.

생태계와 주요 라이브러리

분야 대표 라이브러리 주요 기능
라우팅 React Router 선언형 라우팅, 동적 라우트 매칭
상태 관리 Redux, MobX, Recoil, Zustand 전역 상태 저장·관리
서버 사이드 렌더링(SSR) Next.js, Gatsby SEO 최적화, 정적 사이트 생성
UI 컴포넌트 Material‑UI, Ant Design, Chakra UI 디자인 시스템 제공
데이터 패칭 React Query, SWR 캐시·자동 재요청, Suspense와 연동
테스트 Jest, React Testing Library, Enzyme 유닛·통합 테스트 지원

예시: React Router 기본 사용법

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link> | <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

성능 최적화 전략

  1. 불필요한 렌더링 방지
  2. React.memo(함수형)·PureComponent(클래스형) 사용
  3. useCallback, useMemo 훅으로 함수·값 메모이제이션
  4. 코드 스플리팅
  5. React.lazy와 Suspense로 라우트 별 청크(chunk) 로드
  6. 이미지·미디어 최적화
  7. srcset, loading="lazy" 활용
  8. Concurrent Mode와 Suspense 활용
  9. 비동기 UI 업데이트로 UI 차단 최소화
  10. 프로파일링
  11. React DevTools → Profiler 탭으로 렌더링 비용 분석

테스트 방법론

테스트 종류 도구 주요 포인트
유닛 테스트 Jest, React Testing Library 컴포넌트 단위 입력·출력 검증
통합 테스트 Cypress, Playwright 여러 컴포넌트·라우트가 연동된 흐름 검증
스냅샷 테스트 Jest (snapshot) UI 구조가 의도대로 변하지 않았는지 확인
E2E 테스트 Cypress 실제 브라우저 환경에서 사용자 시나리오 검증

React Testing Library는 “사용자 관점”에 초점을 맞추어 DOM에 실제로 렌더링된 결과를 검증한다. 예시:

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

test('counter increments on click', () => {
  render(<Counter />);
  const button = screen.getByRole('button');
  fireEvent.click(button);
  expect(button).toHaveTextContent('1');
});

개발 도구와 워크플로우

  • Create React App (CRA) – 설정 없이 바로 프로젝트 시작 가능. (npx create-react-app my-app)
  • Vite – 빠른 HMR(Hot Module Replacement) 제공, 최신 ES 모듈 기반.
  • ESLint + Prettier – 코드 스타일·품질 자동화.
  • Storybook – UI 컴포넌트를 독립적으로 개발·시각화.
  • GitHub Actions – CI/CD 파이프라인 구축, PR마다 테스트·빌드 자동 실행.

다른 프레임워크와 비교

항목 React Vue.js Angular
핵심 패러다임 컴포넌트·선언형 UI 컴포넌트·옵션 API 컴포넌트·DI(Dependency Injection)
학습 난이도 중 (JSX, Hooks) 낮‑중 (템플릿 문법) 높 (TypeScript·RxJS)
생태계 규모 매우 큼 (npm ★ 2M+) 큼 (npm ★ 1M+) 중 (npm ★ 500k)
성능 가상 DOM + Fiber 가상 DOM + 최적화된 재활용 실제 DOM + Change Detection
기업 채택 Facebook, Instagram, Airbnb Alibaba, Xiaomi Google, Microsoft

FAQ

Q1. React와 React DOM은 같은 것인가?
A. React는 UI를 정의하는 코어 라이브러리이며, React DOM은 브라우저 환경에서 React를 실제 DOM에 연결해 주는 별도 패키지이다. 서버 사이드 렌더링에서는 react-dom/server를 사용한다.

Q2. 함수형 컴포넌트와 클래스형 컴포넌트 중 어느 것을 선택해야 할까?
A. 현재는 Hooks 덕분에 함수형 컴포넌트가 기본 선택이다. 클래스형은 레거시 코드 유지보수에만 필요하다.

Q3. React 프로젝트에 TypeScript를 적용하려면?
A. npx create-react-app my-app --template typescript 혹은 Vite의 --template react-ts 옵션을 사용한다. 타입 정의는 @types/react, @types/react-dom 패키지를 통해 제공된다.

참고 자료

  • 공식 문서 – https://reactjs.org/
  • React Blog – 최신 릴리스와 아키텍처 해설 (https://reactjs.org/blog)
  • React Patterns – 컴포넌트 설계와 재사용 전략 (https://reactpatterns.com)
  • "Fullstack React" – 실전 프로젝트 기반 학습서 (O'Reilly)
  • MDN Web Docs – Virtual DOM – 가상 DOM 개념 정리 (https://developer.mozilla.org)

본 문서는 2026년 2월 현재 최신 정보를 반영했으며, 향후 React 버전 업데이트에 따라 내용이 변경될 수 있습니다.

AI 생성 콘텐츠 안내

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

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

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