📖 TIL - React 마스터하기 - Level 1: 기초부터 Virtual DOM까지

📌 JavaScript의 Modern Features와 React 기초

1. Optional Chaining과 Null 병합 연산자

Optional Chaining (?.)

• 객체의 속성에 안전하게 접근
• undefined 반환 (에러 방지)

Null 병합 연산자 (??)

• ||(논리합 연산자)와의 차이점: 0, '' 와 같은 falsy 값을 유효한 값으로 처리

const temperature = 0;
console.log(temperature ?? 25);  // 0
console.log(temperature || 25);  // 25

2. Framework vs Library

Framework

• 완전한 프로그래밍 인프라 제공
• 예: Spring, Vue.js, Angular.js
• 제어의 역전(IoC) 특징

Library

• 특정 기능의 모듈화된 집합
• 예: React.js, react-router-dom
• 개발자가 제어 흐름 관리

3. React 라우팅

Hash Routing vs Browser Routing

Hash: www.sample-homepage.com/#about
Browser: www.sample-homepage.com/about

• Browser Routing이 더 깔끔한 URL 제공
• SPA 특성 유지 (단일 HTML)

4. React 프로젝트 생성 도구

CRA vs Vite

# CRA
yarn create-react-app xxxx

# Vite
yarn create vite xxxx --template react

Vite의 장점:

• 빠른 빌드 속도 (Esbuild 사용)
• 유연한 설정
• 다양한 프레임워크 지원

5. 불변성과 DOM 조작

데이터 불변성

• 원시 데이터: 새로운 메모리 공간 할당
• 객체: 기존 메모리 공간의 값 변경

Virtual DOM 처리 과정

1. 두 가지 버전의 가상 DOM 유지
2. Diffing: 변경사항 파악
3. Reconciliation: Batch Update로 실제 DOM 적용

💡 오늘의 배움

• JavaScript의 최신 문법이 실제로 어떤 상황에서 유용한지 이해
• React의 기본 개념과 작동 방식에 대한 이해 향상
• 프론트엔드 개발 도구들의 특성과 장단점 파악

🚀 실무 적용 포인트

1. Null 병합 연산자를 활용한 안전한 기본값 처리
2. Browser Routing을 통한 깔끔한 URL 구조 설계
3. Vite의 장점을 활용한 개발 환경 최적화
4. 불변성을 고려한 상태 관리 구현