[TIL][04.01] 리액트, Virtual Dom, JSX

MVC 패턴 vs MV 패턴

• 일반적인 프레임워크(예: Angular, Spring 등)는 MVC(Model-View-Controller) 아키텍처를 사용.
• 하지만 React는 MV(Model-View)만 사용하며, View(UI)만 신경 쓰도록 설계됨.
• 규모가 커질수록 코드가 복잡해지고, 관리하지 않으면 성능 저하가 발생할 수 있음.

React의 철학

• React는 "UI가 어떻게 생길지"만 고민하면 되도록 설계됨.
• 하지만 이러한 방식은 CPU 점유율이 증가할 가능성이 있음.
• 이유는 DOM 업데이트가 느리기 때문.

 

Virtual DOM

DOM은 왜 느릴까?

• DOM 자체는 빠름. 하지만 CSS, JS 재계산 과정이 느릴 수 있음.
• 기존 방식: 데이터를 업데이트하면 전체 DOM을 다시 렌더링 → 성능 저하.

Virtual DOM이란?

• React는 성능 최적화를 위해 Virtual DOM을 도입.
• Virtual DOM을 이용한 최적화 과정
  1. 데이터가 업데이트되면 전체 UI를 Virtual DOM에 리렌더링.
  2. 기존 Virtual DOM과 비교하여 변경된 부분만 찾아냄.
  3. 바뀐 부분만 실제 DOM에 적용하여 성능 최적화.

Virtual DOM이 무조건 빠른 것은 아님

• Virtual DOM을 잘못 사용하면 오히려 성능이 느려질 수도 있음.
• React는 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축을 목표로 만들어짐.

 

React는 프레임워크가 아니라 라이브러리

라이브러리와 프레임워크의 차이

	라이브러리 (React)	프레임워크 (Angular, Spring)
개념	특정 기능을 수행하는 도구	애플리케이션 구조를 제공하는 뼈대
코드 작성 방식	개발자가 자유롭게 코드 작성 가능	정해진 규칙을 따라야 함
프로그램 흐름	개발자가 직접 제어	프레임워크가 제어 (Inversion of Control)

• React는 라이브러리이므로 뷰(UI)만 신경 씀.
• 상태 관리, 라우팅 등은 직접 구현하거나 추가 라이브러리를 사용해야 함.

 

JSX

기본 규칙

• JSX의 리턴 값은 하나의 부모 태그로 감싸야 함.

변수 사용

• JSX 내부에서는 중괄호 {}를 사용하여 변수 출력.

const name = "React";
return <h1>{name} 배우기</h1>;  // React 배우기

조건부 렌더링

1. 삼항 연산자 (? :) 사용

const isLoggedIn = true;
return <h1>{isLoggedIn ? "환영합니다!" : "로그인 해주세요."}</h1>;

2. && 연산자 사용

const isAdmin = true;
return <h1>{isAdmin && "관리자 페이지입니다."}</h1>;

isAdmin이 true일 때만 "관리자 페이지입니다." 출력.

3. || 연산자 사용 (기본값 설정)

const username = null;
return <h1>{username || "Guest"}</h1>; // Guest 출력