[React] 리액트 라이브러리 이해하기

https://react.vlpt.us/basic/01-concept.html

1. 리액트는 어쩌다가 만들어졌을까? · GitBook

 

 

DOM 변형시키기 위해 어떤 작업을 해야하는가?

브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택하고, 특정 이벤트가 발생하면 변화를 주도록 설정

 

HTML

<h2 id="number">0</h2>
<div>
    <button id="increase">+1</button>
    <button id="decrease">-1</button>
</div>

 

JS

const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');

increase.onclick = () => {
    const current = parseInt(number.innerText, 10);
    number.innerText = current + 1;
};

decrease.onclick = () => {
    const current = parseInt(number.innerText, 10);
    number.innerText = current - 1;
};

 

id를 사용하여 각 DOM을 선택한 뒤, 원하는 이벤트가 발생하면 DOM의 특정 속성을 변경

 

위의 코드

• "+1 버튼이 눌리면, id가 number인 DOM을 선택해서 innerText 속성을 1씩 더해줘라" 규칙
• 사용자와의 인터랙션이 별로 없는 웹 페이지라면 상관 없다.
• 사용자와의 인터랙션이 자주 발생하고, 이에 따라 동적으로 UI를 표현해야 한다면
  • 규칙이 다야해지고
  • 관리하기도 힘들어진다.

 

숙련된 JavaScript 개발자라면, 코드를 깔끔히 정리하고 유지보수 가능하지만

• 대부분의 경우 웹 앱 규모가 커지면 DOM을 직접 건드리면서 작업하면 코드가 난잡해진다.
  • 처리 이벤트도 다양해지고
  • 관리해야할 상태값도 다양해지고
  • DOM도 다양해지게 된다

 

업데이트를 하는 규칙도 복잡해져서 이런 형태가 될 수 있다.

 

그래서 Ember, Backbone, AngularJS 등의 프레임워크가 만들어짐

• 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성이 바뀌도록 연결
• 업데이트 하는 작업 간소화해주는 방식

 

리액트는 조금 다른 발상

• 어떠한 상태가 바뀌었을 때 DOM을 어떻게 업데이트 할 지 규칙을 정하는게 ❌
• 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? ⭕️

 

그렇다면, 속도가 너무 느리지 않을까?

"업데이트를 어떻게 해야할지" 고민을 안해도 되어서 개발이 쉽지만,
동적인 UI를 위해 모든걸 다 날리고 새로 만들면 속도가 느려질텐데...
작은 웹앱이라면 상관없지만 규모가 큰 웹앱이라면?

 

virtual DOM을 이용하여 가능하게 하자 !

 

 

Virtual DOM

• 가상의 DOM으로 브라우저에 실제로 보여지는 DOM이 아니라 메모리에 가상으로 존재하는 DOM
• 그냥 JS 객체임
  • 따라서 작동 성능이 실제로 브라우저에서 DOM을 보여주는 것보다 속도가 빠르다.
• React는 상태가 업데이트 되면,
  • 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링한다.
  • 비교 알고리즘을 통해 실제 브라우저에 보여지고 있는 DOM과 비교한다.
  • 차이가 있는 곳을 감지하여 실제 DOM에 패치시켜준다.
• "업데이트를 어떻게 할지"에 대한 고민도 없애고, 빠른 성능도 지키게 된다.