React

React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다.
Facebook에서 개발되었으며, 컴포넌트 기반의 구조와 선언형 렌더링을 특징으로 한다.

재사용 가능한 컴포넌트를 기반으로 UI를 표현한다.
상태 변화에 따른 화면 업데이트를 효율적으로 처리할 수 있다.
상태(State)와 이벤트 기반의 동적 웹 앱 제작에 적합하다.

React Application

React로 만든 웹 서비스들은 보통 React App 또는 React Application이라고 불린다.
단순한 웹 페이지라기보다는, 브라우저에서 실행되는 하나의 애플리케이션처럼 동작하기 때문이다.

전통적인 웹 페이지는 사용자가 다른 페이지로 이동할 때마다 서버에서 새로운 HTML을 받아왔다.
하지만 React App은 SPA(Single Page Application) 방식으로,
처음 한 번만 HTML과 JS 번들을 불러오고 이후에는 JavaScript가 화면을 동적으로 갱신한다.

그래서 React로 만든 웹 서비스는 '웹 페이지'라기보다, '브라우저 위에서 돌아가는 애플리케이션'으로 많이 불린다.

React 특징

컴포넌트 단위로 재사용성과 확장성을 높이고, 선언적 코드로 가독성과 유지보수성을 강화하며,
가상 DOM으로 렌더링 효율을 최적화한다.

✓ 컴포넌트 기반 개발 (Component Driven Development, CDD)

UI를 독립적이고 재사용 가능한 컴포넌트 단위로 나누어 개발하는 방식이다.
각 컴포넌트는 자신의 상태와 로직, 스타일을 포함할 수 있어 구조화된 개발이 가능하다.

✓ 선언적 프로그래밍 (Declarative Programming)

"어떻게(How)"가 아닌 "무엇(What)"을 중심으로 코드를 작성하는 방식이다.
특정 상태(state)의 값을 변경하는 것만으로도 화면을 업데이트할 수 있다.
명령형 방식보다 코드가 더 직관적이고 유지보수가 쉬워진다.

선언형 vs 명령형 — React vs DOM 조작

// 명령형
const el = document.getElementById("count");
el.innerText = count;

// 선언형
function Counter({ count }) {
  return <div>{count}</div>;
}

구분	선언형 (Declarative)	명령형 (Imperative)
대표 예	React	Vanilla JS (DOM API)
설명 방식	"무엇을 보여줄지"에 초점	"어떻게 보여줄지"에 초점
주요 특징	상태(state)에 따라 UI가 자동으로 렌더링됨	DOM 요소를 직접 선택하고 수동으로 업데이트함
유지보수	코드가 간결하고 구조적	코드가 길고 복잡해질 수 있음
렌더링 방식	상태만 바꾸면 알아서 화면이 바뀜	매번 innerText, appendChild 등 직접 조작해야 함

✓ 가상 DOM 사용 (Virtual DOM)

상태 변화가 발생하면, 먼저 가상의 DOM 트리를 만들고 이전 상태와 비교한 후 실제 DOM에는 필요한 변경만 최소한으로 적용한다. 이를 통해 성능을 최적화할 수 있다.

가상 DOM?

DOM을 자바스크립트 객체로 표현한 일종의 복제판
React는 업데이트가 발생하면 실제 DOM을 수정하기 전에 이 가상의 복제판 DOM에 먼저 반영한다.

⚠️ 가상 DOM이 실제 DOM보다 항상 빠른 건 아니다.

가상 DOM을 생성하고 비교하는 과정이 추가되므로 실행 속도 자체는 더 느릴 수 있다. 하지만, 불필요한 실제 DOM 조작을 줄이고 효율적으로 렌더링을 처리하기 때문에 전체적인 렌더링 성능은 더 좋아지는 경우가 많다.

React 가상 DOM 구조와 동작 흐름

bash

Rendering → Diffing → Patching

Rendering: 초기 상태 또는 상태 변화 시, React는 상태와 props 기반으로 새로운 가상 DOM 트리를 생성한다.
Diffing: 이전 가상 DOM과 새로운 가상 DOM을 비교해, 어떤 요소가 변경되었는지를 파악한다.
이 과정을 Reconciliation(조정: 변경된 부분만 실제 DOM에 반영하는 과정)이라고 한다.
Patching: 실제 DOM에는 필요한 변경만 최소한으로 적용하여 렌더링 비용을 최소화한다.
📎 [10분 테코톡] 돔하디의 Virtual DOM
📎 React의 가상돔 (Virtual DOM)이 뭔가요?

가상 DOM을 사용하는 이유

성능 최적화: 직접 DOM 조작은 무겁지만, 가상 DOM 비교 후 변경점만 반영하면 빠르다.
개발 편의성: 개발자가 DOM을 직접 조작하는 번거로움 없이 선언형 UI 작성 가능하다.
일관성: 상태 기반 렌더링이라 예측 가능한 UI 업데이트

React 프로젝트 생성

Vite

Vite는 빠른 개발 서버와 빌드 환경을 제공하는 프론트엔드 개발 도구이다.
React 프로젝트를 시작할 때 초기 설정 파일과 폴더 구조를 빠르게 생성할 수 있다.

bash

# Vite 기반 React 프로젝트 생성
$ npm create vite@latest

개발 환경에서는 native ESM 방식을 활용해 빠르게 모듈을 불러옴
프로덕션 빌드 시에는 Rollup을 기반으로 번들링
서버 시작 속도가 빠르고, HMR(Hot Module Replacement)이 빠르게 동작
빠른 개발 경험에 유리

🪺 Bundling

여러 개의 JavaScript 모듈 파일을 브라우저에서 실행하기 적합한 형태로 묶는 작업을 말한다.
번들링을 하면 여러 파일 간의 의존성을 정리하고, 배포 환경에서 효율적으로 파일을 제공할 수 있다.

React 생태계에서 사용되는 대표적인 번들러는 다음과 같다.

Webpack: Create React App(CRA)의 기본 번들러
Rollup: Vite가 프로덕션 빌드 시 사용하는 번들러

🛠️ Scaffolding

새로운 프로젝트를 시작할 때 초기 디렉토리 구조와 설정 파일을 자동으로 생성해주는 작업을 말한다.
Vite는 scaffolding 기능을 제공하며, npm create vite@latest 명령어를 통해 React, Vue, Svelte 등 다양한 프로젝트 템플릿을 생성할 수 있다.

Folder Structure ⚡️ Vite

plaintext

React with Vite
├── README.md              # 프로젝트 설명 문서
├── index.html             # HTML 진입점, 루트 요소 (#root) 포함
├── package.json           # 의존성, 스크립트, 메타데이터 설정
├── package-lock.json      # 의존성 트리 고정 (자동 생성됨)
├── vite.config.js         # Vite 빌드 설정 파일
├── public/                # 정적 파일 (빌드시 가공 없이 그대로 복사됨)
│   └── vite.svg
└── src/                   # 애플리케이션 소스 코드
    ├── main.jsx           # 앱의 진입점 (ReactDOM.createRoot)
    ├── App.jsx            # 최상위 App 컴포넌트
    ├── App.css            # App 전용 스타일
    ├── index.css          # 전체 전역 스타일
    └── assets/            # import 가능한 정적 리소스 (이미지 등)
        └── react.svg

📂 public/:

외부에서 접근 가능한 정적 리소스를 저장하는 디렉토리
빌드 시 이 폴더의 파일은 가공되지 않고 dist/로 그대로 복사된다.
폰트, 이미지, 영상, favicon, SEO 관련 메타 태그용 이미지 등 포함한다.
접근 경로 예시: /vite.svg

📂 src/assets/:

React 코드에서 import 문을 통해 사용되는 정적 자원을 저장하는 디렉토리
Vite는 이 경로의 파일들을 자동 최적화하고 해시 처리한다.
예시: import reactLogo from './assets/react.svg';

작동 방식과 진입점 구성

🧩 React App 웹 서버 · localhost

Vite로 생성한 React 앱은 개발용 웹 서버를 실행할 수 있다.

npm run dev 명령어를 입력하면 개발 서버가 실행되고, 콘솔에 접속 가능한 주소가 출력된다.
ex. localhost:5173은 내 컴퓨터에서 실행 중인 React 개발 서버에 접속하는 주소이며, 5173은 포트 번호를 의미한다.

리액트는 CSR(Client Side Rendering) 방식으로 동작하며 SPA(Single Page Application)
구조를 따른다. 한 번의 HTML 로딩 이후 모든 렌더링은 자바스크립트를 통해 브라우저에서 처리된다.

CSR (Client Side Rendering)

CSR은 클라이언트(브라우저)에서 페이지를 렌더링하는 방식이다.
서버는 HTML, CSS, JS 파일을 전달하고, 이후 화면 전환은 클라이언트에서 처리한다.

SPA (Single Page Application)

하나의 HTML 파일에서 시작해, 전체 페이지를 새로 고치지 않고 필요한 부분만 동적으로 전환하는 애플리케이션 구조이다.

진입점 `index.html`

index.html에서 main.jsx 파일을 불러와 실행한다.
main.jsx에서는 App.jsx 파일에 정의된 App 컴포넌트를 화면에 렌더링한다.

main.jsx

jsx

import React from "react"; // React 라이브러리
import ReactDOM from "react-dom/client"; // ReactDOM.createRoot 사용
import App from "./App.jsx"; // 최상위 App 컴포넌트
import "./index.css"; // 전역 스타일

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

main.jsx는 애플리케이션의 진입점이다.
HTML의 #root 요소를 찾아 <App /> 컴포넌트를 렌더링한다.
React.StrictMode는 개발 중 잠재적 문제를 감지하는 도구로, 프로덕션 빌드에는 영향을 주지 않는다.

App.jsx (루트 컴포넌트)

애플리케이션의 최상위 컴포넌트로, 모든 하위 컴포넌트를 포함하고 조합하는 역할을 한다.
일반적으로 가장 먼저 렌더링되며, 전체 UI 흐름의 시작점이 된다.
App 컴포넌트가 리턴하고 있는 html을 main.js에서 리액트의 루트 아래에 render 메서드를 통해 화면에 렌더링한다.

React ​

React ​

React Application ​

React 특징 ​

✓ 컴포넌트 기반 개발 (Component Driven Development, CDD) ​

✓ 선언적 프로그래밍 (Declarative Programming) ​

✓ 가상 DOM 사용 (Virtual DOM) ​

가상 DOM? ​

React 가상 DOM 구조와 동작 흐름 ​

가상 DOM을 사용하는 이유 ​

React 프로젝트 생성 ​

Vite ​

Folder Structure ⚡️ Vite ​

📂 public/: ​

📂 src/assets/: ​

작동 방식과 진입점 구성 ​

CSR (Client Side Rendering) ​

SPA (Single Page Application) ​

진입점 index.html ​

main.jsx ​

App.jsx (루트 컴포넌트) ​

React

React

React Application

React 특징

✓ 컴포넌트 기반 개발 (Component Driven Development, CDD)

✓ 선언적 프로그래밍 (Declarative Programming)

✓ 가상 DOM 사용 (Virtual DOM)

가상 DOM?

React 가상 DOM 구조와 동작 흐름

가상 DOM을 사용하는 이유

React 프로젝트 생성

Vite

Folder Structure ⚡️ Vite

📂 public/:

📂 src/assets/:

작동 방식과 진입점 구성

CSR (Client Side Rendering)

SPA (Single Page Application)

진입점 `index.html`

main.jsx

App.jsx (루트 컴포넌트)