1. DOM이란?
DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다.
DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다.
문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다
-DOM은 HTML과 스크립트 언어(Javascript)를 서로 이어주는 역할
자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까?
- Document라는 전역 객체를 통해 접근
- window라는 객체는 document객체의 상위에 위치
2. 가상 DOM(Virtual DOM)이 나오게 된 이유
요즘엔 큰 규모의 웹 애플리케이션은 스크롤바를 내릴 수록 수많은 데이터가 로딩된다.
그리고 각 데이터를 표현하는 요소들이 있다. 요소 개수가 몇 백 개, 몇 천 개 단위로 많은 규모가 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈가 발생하게 된다.
즉, 기능상 속도에서 저하를 일으킬 수 있다.
웹브라우저 단에서 DOM변화가 일어나면 웹브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고, 페이지를 리 페인트 즉, 리랜더링이 일어 나는 과정이 낭비되는 것
결론 적으로, 속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 가상돔(Virtual DOM)이 나왔습니다.
랜더링 : 브라우저 로딩 과정 중 스타일 이후의 과정(스타일-> 레이아웃 -> 페인트 -> 합성)을 렌더링이라고 한다.
3. 가상 DOM(Virtual DOM)이란
Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용
4. DOM과 가상 DOM(Virtual DOM)의 차이
가상 DOM(Virtual DOM)을 이용하면 실제 DOM에 변화를 바로 적용하는 것보다 전체적인 프로세스를 효율적으로 수행할 수 있다.
- "효율적이다" === 전체적인 프로세스에 드는 비용이 비교적 적다
속도 차원의 문제라기 보다는, 연산 횟수 차원의 문제라고 할 수 있다. 우선 각각의 DOM 조작은 레이아웃 변화, 트리 변화 및 렌더링을 일으킨다.
-
가상 DOM을 이용하지 않으면 변화가 있을 때마다 DOM 조작이 일어나고 이에 대한 연산이 수행되며 렌더링되기 때문에 변화를 적용할 때 드는 비용이 비교적 크다.
-
가상 DOM을 이용하면 일종의 '오프라인' DOM 트리(이는 렌더링 되지 않는다 → 연산 비용이 적다!)에 변화들을 적용한 뒤 그 변화를 하나로 묶어서 한번에 실제 DOM에 전달하기 때문에 연산 횟수가 줄어들고 변화에 대한 비용이 비교적 작다.
5. 리액트란?
리액트는 2011년 페이스북의 개발자들에 의해 탄생한 자바스크립트 라이브러리로서, 웹/모바일 애플리케이션의 뷰를 개발할 때 사용된다. 리액트는 컴포넌트에 기반한 접근 방식을 사용하므로, 재사용 가능성이 높은 컴포넌트를 개발할 수 있다.
6. 리액트의 주요 특징
리액트는 단방향식 데이터 흐름 모델을 사용한다.
- 부모 컴포넌트 -> 자식 컴포넌트
리액트는 가상 DOM을 사용한다.
7. JSX란?
JSX는 Javascript XML(eXtensible Markup Language)의 약어로 HTML 요소에 유효한 자자스크립트 객체를 내장할 수 있는 자바스크립트 확장이다. 리액트에선 보통 HTML과 자바스크립트를 별도로 작성하기 보다는 JSX를 이용하여 HTML과 자바스크립트를 모두 포홤하고 있는 '컴포넌트'를 생성한다.
* 브라우저가 JSX파일을 읽을 수 있을까?
브라우저는 JSX 파일을 직접 읽을 수는 없다. 브라우저가 JSX 파일을 읽으려면 JSX를 자바스크립트 객체로 변환을 해야 한다. 그리고 그 변환 작업은 바벨과 같은 컴파일러를 통해 이루어진다.
8. 리액트의 단점은?
리액트는 단순 라이브러리이기 때문에, 더 많은 기능을 사용하고자 한다면 Redux, Router 등 많은 dependncies(의존성 모듈)가 필요하다.
단 방향 데이터 바인딩만 제공하는 것이 복잡도를 줄이기 때문에 장점이지만, 양방향 바인딩에 비해서 더 많은 양의 코드를 작성해야한다.
9. 리액트에서 랜더링은 어떻게 동작하나?
리액트에서는 모든 컴포넌트가 랜더링이 되어야 하기 때문에, 랜더링이 매우 중요하다.
리액트에서 랜더링은 render()함수를 통해 이루어지는데, 이 함수가 호출되면 DOM요소를 나타내는 요소가 반환된다.
한번에 둘 이상의 HTML요소를 랜더링하는 것도 가능하다. HTML요소들을 여는 태그, 닫는 태그로 감싸면 캡슐화 태그로 감싸면 여러 요소를 동시에 랜더링할 수 있다.
10. 리액트에서 상태(state)란 무엇인가?
리액트에서 상태는 컴포넌트의 동작 및 랜더링과 같은 부분을 제어하는 데이터 또는 객체를 의미한다.
상태를 이용하여 동적이고 인터렉티브한 컴포넌트를 개발할 수 있다.
