바닐라 js vs react (JSX, Babel) && react hooks

DOM :

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다.

DOM 이란?

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

웹 페이지는 일종의 문서(document)다. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

DOM 접근 방법 JS vs React

JSX :

문자도 HTML도 아닌 JS의 확장 문법

 

Babel: 

JS컴파일러

react re-render:

불변성을 가진 react 엘리먼트를 재조정 (reconciliation)알고리즘을 통해 렌더하는 조건

 

컴포넌트란?

useEffect를 통해 사이드 이펙트 다루기

의도한 변화에만 부수 효과를 낸다 = 어떠한 값이 바뀌었을때 동작하게 함 

의존성 배열이 빈 값이면 한 번만 동작한다.