반응형
SMALL
리액트를 브라우저에서 다루려면 React와 ReactDOM 라이브러리를 불러와야 한다. React는 뷰를 만들기 위한 라이브러리고 ReactDOM은 UI를 실제로 브라우저에 렌더링할 때 사용하는 라이브러리다. 또한, ReactDOM이 UI를 렌더링하기 위해 사용할 HTML 엘리먼트가 필요하다.
HTML은 브라우저가 문서 객체 모델(DOM)을 구성하기 위해 따라야 하는 절차
HTML 문서를 이루는 엘리먼트는 브라우저가 HTML 문서를 읽어 들이면 DOM 엘리먼트가 되고, 이 DOM이 화면에 사용자 인터페이스를 표시한다.
전통적으로 웹사이트는 독립적인 HTML 페이지들로 만들어졌다. 사용자가 페이지 사이를 내비게이션하면 브라우저는 매번 다른 HTML 문서를 요청해서 로딩한다. AJAX가 생기면서 단일 페이지 앱(Single-Page Application, SPA)이 생겼다. SPA에서 처음에 브라우저는 HTML 문서를 하나 적재한다. 사용자는 사이트를 내비게이션하지만 실제로는 같은 페이지 안에 계속 머문다. 자바스크립트는 사용자가 애플리케이션과 상호작용 하는 것에 맞춰 표시 중이던 인터페이스를 제거하고 새로운 사용자 인터페이스를 만든다.
리액트는 브라우저 DOM을 갱신하기 위해 만든 라이브러리
DOM API 는 브라우저의 DOM을 변경하기 위해 자바스크립트가 사용할 수 있는 객체의 모음으로, document.createElement 나 document.appendChild 등을 말한다. 자바스크립트를 사용해 DOM 변경을 효율적으로 처리하는 일은 아주 복잡하고 시간이 오래 걸리는 일인데, 이에 대한 해법이 바로 리액트다.
반응형
LIST
'React' 카테고리의 다른 글
| State 끌어올리기, 합성, 상속 (0) | 2022.11.10 |
|---|---|
| 리스트(List), 키(Key), 폼(Form) (0) | 2022.11.10 |
| 이벤트 처리와 조건부 렌더링 (0) | 2022.11.09 |
| State and Lifecycle (0) | 2022.11.09 |
| Element Rendering, Component, Props (0) | 2022.11.08 |