- 자바스크립트에 대한 간략한 설명
자바스크립트는 웹브라우저에 내장된 언어입니다!
자바스크립트 언어를 작성하고 싶다? 웹 브라우저의 콘솔창을 여세요!
하지만 콘솔창에서 긴 자바스크립트언어를 작성하는 것은 불가능하니, 따로 js 파일을 만들어 작성하는 것이랍니다.
자바스크립트 즉, 단순 브라우저 콘솔창을 이용하는 것만으로도, HTML의 구성요소를 바꿀 수 있음.
즉 자바스크립트는, HTML과 항상 연결되어 있다
따라서 자바스크립트 내에서 document. 키워드를 주고 어떤 HTML의 구성요소든 다 참조할 수 있다.
document.title = "Hello" //실행된 html 페이지의 title이 Hello로 바뀝니다!0. 순수 자바스크립트, 무엇이 문제일까?
순수 자바스크립트로 애플리케이션을 개발하는 것은 매우 골치 아픈 짓이다. 그래서 이러한 자바스크립트를 기반으로 조금씩 다른 관점에서 프레임워크를 개발해 더 쉽고 편하게 애플리케이션을 개발하기 시작한다. 그러한 것들 중에는 Angular, Backbone.js, Ember.js, Vue.js 등등이 있고, 지금은 이중 'React'라는 라이브러리를 제대로 다뤄보려고 한다. (프레임워크는 아니다)
추후에 서술되었지만, 'View'만 신경쓰는 라이브러리이기 떄문에 기타 기능은 따로 구현해야 한다.
1. 리액트의 방식
만일 div id = 'post-1' 태그의 하위 클래스인 'likes' 의 내부를 수정한다고 가정해보자.
<div id = "post-1">
<div class = "likes">1</div>
</div>원래같으면, 직접 post-1의 likes 요소를 찾아서 값을 직접 변경해야만 하겠지만, 이 과정은 큰 규모의 작업에서는 힘든 일이 될 수 있다.
이를 해결하기 위해서, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라, 그냥 기존의 뷰(화면에 보여지는 것)을 날려버리고 처음부터 새로 렌더링하는 방식을 택하는 것이 '리액트' 의 방식이다.
2. 리액트의 이해
그렇다면, 매번 새롭게 렌더링 한다는 것은 컴퓨터에게 CPU에 부담을 주거나, DOM은 느리므로 메모리도 많이 사용해 문제가 생길 수 있지 않을까? 하는 문제점이 생긴다. 이 점에 대해 알아보자.
리액트는 구조가 MVC(Mode-View-Controller), MVW(Mode-View-Whatever) 같은 다른 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다. 리액트의 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체를 '컴포넌트'라고 한다. 그리고, 사용자 화면에 뷰를 보여주는 것을 렌더링이라고 하는데, 리액트가 어떻게 렌더링을 하길래, 성능을 아끼면서 리렌더링할 수 있는지 파악해 보자.
1) 초기 렌더링
초기렌더링이란 어떤 프레임워크든 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 것이 초기 렌더링이다. 리액트에서는 이를 'render'함수로 구현한다.
이 함수는 컴포넌트들이 어떻게 생겼는지 정의하는 역할을 하는데, 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 '객체'를 반환한다.
- <일반 바닐라 자바스크립트가 어떻게 render 되는지 확인하는 코드 추가 예정>
2) 조화 과정
리액트 라이브러리에서 업데이트를 어떻게 진행하는지 알아보자. 우선 리액트에서 뷰를 업데이트할 때에는 '조화 과정'을 거친다고 표현한다. 컴포넌트에서 데이터에 변화가 있을 때 남들이 보기에는 그냥 변화에 따라 뷰가 변화되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우게 된다.
이 작업을 render함수가 맡아서 하는데, render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지 객체를 반환할 때, 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render함수를 재귀적으로 또 다시 호출한다. (그럼 두가지의 렌더 함수의 결과가 생긴다.
첫 번째 render함수에는 이전 컴포넌트의 정보가 반영되어 있지만, 두 번째로 재귀적으로 호출한 render함수에는 업데이트 이후의 컴포넌트 정보가 반영되어 있다.)
그러면 그 데이터를 지닌 뷰를 또 한번 생성하게 되는데, 이전 render 함수가 만들었던 컴포넌트 정보와 재귀적으로 호출된 render 함수가 만든 컴포넌트 정보를 비교한다. 자바스크립트를 사용하여 두가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 DOM트리를 업데이트 하는 방식으로, 최적의 자원을 사용하여 리렌더링을 거친다.
3. 리액트의 특징 - Virtual DOM
리액트는 Virtual Dom을 사용한다.
먼저 DOM이란, Document Object Model 의 약어로, 객체로 문서구조를 표현하는 방법이다. (XML,HTML로 작성)
웹 브라우저는 이 DOM을 활횽하여 객체에 자바스크립트와 CSS를 적용한다.
DOM은 트리형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다.
하지만, 이 DOM API는 동적 UI에 최적화되어 있지 않다. HTML자체는 정적이다. 이를 자바스크립트를 사용하여 동적으로 만들 수 있다.
Virtual DOM 을 사용하면 실제 DOM 에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용한다. (실제 DOM의 가벼운 사본과 비슷)
리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 떄는 다음 세가지 절차를 밟는다.
1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
3. 바뀐 부분만 실제 DOM에 적용한다.
DOM은 느린가?
DOM은 느리다고 오해할 수 있는데, 사실은 빠르다. DOM자체를 읽고 쓸 때의 성능은 자바스크립트 객체를 처리할 떄의 성능과 비교하여 다르지 않다. 다만, 웹 브라우저의 DOM에 변화가 일어나면, 웹 브라우저가 CSS를 다시 연산하고, 레이아웃을 재구성하며, 페이지를 리페인팅하는 데에 시간이 허비될 뿐이다. 따라서 Virtual DOM을 사용하여 DOM업데이트를 추상화하여 DOM 처리 횟수를 최소한으로 하여 효율적으로 진행한다.
