리액트로 개발할 때 한 번쯤은 무조건 들어볼 법한 용어들의 개념을 한 번 더 숙지해보자.
JSX
:
JavaScript XML의 약자이며, JS 안에서 XML/HTML 처럼 UI를 표현하는 문법 확장.{}괄호를 사용하여 JS의 문법을 직접적으로 사용할 수 있다.
Babel (Transpiler)
:
JSX또는 최신 JS 문법 코드를모든 브라우저가 호환가능한 JS 문법으로 변환해준다.
(예:<h2/>->React.createElement("h1", ...))
React Element
:
VDOM(Virtual-DOM) 노드의 값 객체이며, 아직 실제 DOM 은 아닌 상태.
(예:{ type: "div", props: {...} }
Virtual DOM
: 실제 DOM의 가상 표현(객체 트리). diff을 하여 최소한의 패치를 진행함.
(예: "7 ->8" 텍스트만 교체)
Diffing/Reconciliation
: 이전 또는 새 VDOM 비교 및 실제 DOM 갱신 절차.
(규칙: Type 같을 경우 재사용 or 패치하고 다르면 교체, list 는 key 기반)
Fiber
: React 16+ 렌더 엔진. 작업 쪼개기/중단,재개/우선순위
(단계: Render(중단 가능) -> Commit (짧고 원자적)
Automatic Batching
: 여러
setState를 한 번에 묶어서 렌더 횟수 최소화 (React 18)
Declarative UI
: 상태 -> UI 규칙을 선언, DOM 조작은 시스템이 담당. (<->
Imperative UI)
(예:{open && <Panel/>}
Imperative UI
: DOME을 직접 찾고 수정. (<->
Declarative UI)
(예:element.style.display = 'block')
createRoot
: 새 루트 API (
React 18). 동시성 기능, batch, 우선순위를 활용
(React 17까지는render()방식으로 사용하였음)
