웹브라우저를 통해 만든 웹 에플리케이션이 다양해졌다.
이렇게되니 웹 개발도 복잡해지면서 기존 html, css, js로만으로 웹 개발을 하기에는 한계가 생겼다.
이에 따라 DOM조작을 쉽게해주는 라이브러리 jQuery가 등장하게 되었지만,
어쨌든 DOM을 직접 조작하는 방식.
DOM 조작의 단점
웹이 크고 복잡해질수록 돔트리(html각 태그들을 트리형태로 만든 것)도 거대해 진다. 거대한 DOM에서 변경하고자 하는 노드를 탐색하려면 많은 시간이 걸리고, 한 노드에 변화가 생겼을 때 거대한 트리를 다시 렌더링하는 비효율적인 프로세스가 발생한다.
기존의 DOM은 페이지가 변경될 때 마다 새로운 html을 로드하며 DOM전체를 다시 가져오는데
이러한 방식이 비효율적이기에 등장하게 된 것이 Virtual Dom이고. 이것을 사용하는 프레임워크와 라이브러리가 React, Angular, Vue라고 한다.
Virtual Dom은 React 컴포넌트가 리턴하는 값에 의해 만들어져서 실제 보이고 있는 DOM과 비교해서 달라진 부분만 찾아내어 바꾸게 된다.Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후, 구성요소의 변경이 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것이다.
중간 단계로 Virtual DOM을 수정, Virtual DOM을 통해서 DOM을 수정하는 방식이다.
DOM에 대해서는 두루뭉술해 더 공부를 해봐야할 것 같다.
프레임워크
- 개발자가 작업을 하기위한 tool을 제공,
- 이 틀 안에서 방식에 맞추어 작업.
라이브러리
- 전체적인 틀이 아닌 하나의 기능만을 제공
- 개발자는 필요한 기능을 가져와 사용.
처음 안 사실 :
- 앵귤러와 뷰는 웹 개발을 하는 모든 기능과 tool을 가진다. 따라서 프레임워크라고한다.
- 리엑트는 ui만 만드는 기능만 제공한다. 따라서 라이브러리.
- 리엑트가 라이브러리이기에 다른 프레임워크나 라이브러리와 함께 사용기 가능하다.
일단 처음 접하게 되었던 자바스크립트 기반 문법이고, 많은 이용자가 있으니 리엑트를 사용하게되었지만, ui만 만든다는 것이 무슨 의미인지 아직 파악이 되지 않는다.
프레임워크와 라이브러리를 나누는것에 대해 아직 논란이 있으나,이 세가지를 보니 좀 다르구나 라는것이 느껴지기는 한다.
자바스크립트와 리엑트를 잡으면서 다른 언어들도 공부해 나가야겠다.
