⚛️ React

React란?

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

재사용 가능한 UI 컴포넌트로 앱을 구성할 수 있다.
상태(State)와 이벤트 기반의 동적 웹 앱 제작에 적합하다.
React는 CSR(SPA) 방식에 최적화되어 있으며, Vite, Webpack 등과 함께 사용된다.

전 세계 커뮤니티에 의해 유지되는, 신뢰할 수 있는 오픈 소스 UI 라이브러리이다.

📎 State of JS와 📎 npm trend를 통해 그 인기와 생태계의 활발함을 확인할 수 있다.

React 특징

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

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

"어떻게(How)"가 아닌 "무엇(What)"을 중심으로 코드를 작성하는 방식이다.
명령형 방식보다 코드가 더 직관적이고 유지보수가 쉬워진다.

🧩 React의 선언적 프로그래밍 구현 방식

상태(State)라는 데이터가 변하면, 변화한 상태에 맞춰 UI가 자동으로 업데이트된다.

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

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

가상 DOM 사용 (Virtual DOM):
상태 변화가 발생하면, 먼저 가상의 DOM 트리를 만들고 이전 상태와 비교(diff)한 후
실제 DOM에는 필요한 변경만 최소한으로 적용한다. 이를 통해 성능을 최적화할 수 있다.
⚠️ 가상 DOM이 실제 DOM보다 항상 빠른 건 아니다.
가상 DOM을 생성하고 비교(diff)하는 과정이 추가되므로 실행 속도 자체는 더 느릴 수 있다.
하지만, 불필요한 실제 DOM 조작을 줄이고 효율적으로 렌더링을 처리하기 때문에 전체적인 렌더링 성능은 더 좋아지는 경우가 많다.
⚙️ React 가상 DOM 구조와 동작 흐름
1. Rendering
  초기 상태 또는 상태 변화 시, React는 상태와 props 기반으로 새로운 가상 DOM 트리를 생성한다.
2. Diffing
  이전 가상 DOM과 새로운 가상 DOM을 비교해, 어떤 요소가 변경되었는지를 파악한다.
  이 과정을 Reconciliation(조정)이라고 한다.
3. Patching
  실제 DOM에는 필요한 변경만 최소한으로 적용하여 렌더링 비용을 최소화한다.
- 📎 [10분 테코톡] 돔하디의 Virtual DOM
- 📎 React의 가상돔 (Virtual DOM)이 뭔가요?

React 프로젝트 생성

🗳️ CRA, Create-React-App ⛔️ 비권장

📎 create-react-app

bash

# 모듈도 같이 설치됨 (node_modules 자동 포함)
$ npx create-react-app my-app

모듈 번들러로 Webpack 사용
개발 환경에서도 전체 번들링을 진행
서버 시작과 리로딩 속도가 늘리 수 있음
하지만 웹팩의 다양한 커스터마이징 기능 활용 가능

⚡️ Vite 공식문서 권장

📎 Vite

bash

# 모듈은 따로 설치해야 함
$ npm create vite@latest

모듈 번들러로 Rollup 기반 사용
개발 환경에서는 번들링을 생략하고 native ESM 방식 사용
서버 시작 속도 빠름, HMR(핫 모듈 리플레이스) 빠름
빠른 개발 경험에 유리함

🪺 Bundling

여러 개의 자바스크립트 모듈 파일을 하나의 파일로 묶는 작업을 말한다.
이렇게 묶으면 브라우저에서 요청 수를 줄이고 의존성 문제를 해결할 수 있다.

React 생태계에서 사용되는 대표적인 번들러

Webpack: Create React App(CRA)의 기본 번들러
Rollup: Vite에서 사용하는 번들러 (개발 중엔 생략 가능)

🛠️ Scaffolding

새로운 프로젝트나 모듈을 시작할 때, 초기 디렉토리 구조와 설정 파일들을 자동으로 생성해주는 작업을 말한다.

Vite, CRA 모두 scaffolding 기능을 제공하며, npm create 또는 npx create-... 등의 명령어로 실행할 수 있다.

📂 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/로 그대로 복사된다.
index.html, favicon, SEO 관련 메타 태그용 이미지 등 포함한다.
접근 경로 예시: /vite.svg

📂 src/assets/:

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

⚙️ 리액트 앱의 작동 방식과 진입점 구성

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

CSR (Client Side Rendering)

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

SPA (Single Page Application)

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

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 흐름의 시작점이 된다.

⚛️ React ​

React란? ​

React 특징 ​

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

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

가상 DOM 사용 (Virtual DOM): ​

React 프로젝트 생성 ​

🗳️ CRA, Create-React-App ⛔️ 비권장 ​

⚡️ Vite 공식문서 권장 ​

📂 Folder Structure ⚡️ Vite ​

📂 public/: ​

📂 src/assets/: ​

⚙️ 리액트 앱의 작동 방식과 진입점 구성 ​

CSR (Client Side Rendering) ​

SPA (Single Page Application) ​

main.jsx (진입점) ​

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