React 요약 1 - 기초

React란?

React는 Facebook에서 개발한 UI 라이브러리로, 컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI 요소를 만들 수 있게 해줍니다.

가상 DOM (Virtual DOM)

React는 실제 DOM을 직접 조작하지 않고, 가상 DOM을 사용하여 성능을 최적화합니다.

// React는 이런 JSX 코드를
const element = <h1>Hello, world!</h1>;

// 내부적으로 이렇게 변환합니다
const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

// 그리고 가상 DOM에서 변경사항을 계산한 후 실제 DOM에 효율적으로 적용합니다

코멘트: JSX는 JavaScript XML의 약자로, HTML과 유사한 문법을 JavaScript 내에서 사용할 수 있게 해주는 문법적 확장입니다. Babel과 같은 트랜스파일러가 이를 순수 JavaScript로 변환합니다.

프로젝트 시작하기

# Create React App으로 새 프로젝트 생성
npx create-react-app my-app

# Vite로 새 프로젝트 생성 (더 빠른 개발 환경)
npm create vite@latest my-app -- --template react

# 프로젝트 폴더로 이동
cd my-app

# 개발 서버 시작
npm start  # CRA
# 또는
npm run dev  # Vite

코멘트: 최근에는 Create React App보다 Vite를 사용하는 추세입니다. Vite는 빌드 시간이 훨씬 빠르고, 개발 서버의 Hot Module Replacement(HMR) 성능이 뛰어납니다.