React(리액트): 리액트는 어쩌다가 만들어졌을까

  리액트 라이브러리는 어쩌다가 만들어졌을까?

리액트라는 라이브러리가 어쩌다가 만들어졌는지 알면 리액트를 이해하는데 도움이 될 것이다.

JavaScript를 사용해서 HTML로 구성한 UI를 제어해보았다면 DOM을 변형시키기 위해서 어떤 작업을 해야 하는지

익숙할 것이다. 여기서 DOM이란, 각 HTML element에 대한 정보를 지니고 있는 자바스크립트 객체이다.

DOM을 변형하려면 브라우저의 DOM Select API를 사용해서 특정 DOM을 선택한 뒤에, 특정 이벤트가 발생하면

변화를 주는 작업을 해주어야 한다.

 

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;
}

다음처럼 사용자와의 상호작용이 별로 없는 웹페이지의 경우는 상관이 없겠지만 상호작용이 자주 발생하고 동적으로 

UI를 표현해야 한다면 increase.onclick 같은 규칙들이 정말 다양해질 것이고 관리하기도 매우 힘들어질 것이다. 

만약 숙련된 자바스크립트 개발자라면 코드를 최대한 깔끔하게 정리하면서 쉽게 유지보수를 할 수도 있겠지만 

대부분의 경우 웹 애플리케이션의 규모가 커지게 되어 DOM을 직접 건드리면서 코드를 작성하게 되면 코드가

난잡해지기 쉽다. 처리해야 할 이벤트도 다양해지고 관리해야 할 상태도 다양해지고 DOM도 다양해지면서 업데이트를

하는 규칙도 엄청나게 많아진다. 

 

그렇게 되면 코드가 위 그림과 같은 모양이 된다. 여기저기서 서로를 참조하게 되고 유지보수를 하기 어려운 코드가 

만들어지기 쉽다.

 

이와 같은 문제를 해결하고자 Ember, Backbone, AngularJS와 같은 프레임워크들이 만들어졌었는데 이 프레임워크들은 작동방식이 각각 다르지만 쉽게 설명하자면 자바스크립트의 특정 값이 바뀌면 특정 DOM의 속성도 함께 바뀌도록 

연결을 해주어 업데이트하는 작업을 간소화해주는 방식으로 문제를 해결했다. 

 

하지만 리액트의 경우에는 조금 다른 발상에서 만들어졌다. 리액트는 어떠한 상태가 바뀌었을 때 그 상태에 따라 

DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라 아예 '다 날려버리고 처음부터 새로 다 만들어서 보여준다면

어떨까?'라는 아이디어에서 개발이 시작되었다.

 

이렇게 하면 업데이트에 대한 고민을 전혀 하지 않아도 되기 때문에 개발이 정말 쉬워질 것이다. 하지만 동적인 UI를

위해서 모든 걸 다 날려버리고 모든걸 새로 만들게 된다면 속도가 굉장히 느릴 것이다. 규모가 큰 웹 애플리케이션의 

경우는 상상도 할 수 없는 일이다.

 

하지만 리액트에서는 Virtual DOM이라는 것을 사용해 성능을 지켜가면서도 이를 가능하게 했다. 

Virtual DOM은 가상의 DOM으로 브라우저에서 실제로 보이는 DOM이 아니라 메모리에 가상으로 존재하는 

DOM으로서 그냥 자바스크립트 객체이기 때문에 작동 성능이 실제 브라우저에서 DOM을 보여주는 것보다 속도가

훨씬 빠르다. 

 

리액트에서는 상태가 업데이트되면 업데이트가 필요한 UI를 메모리에 있는 Virtual DOM에다가 랜더링을 한다.

그러고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 사용해서 실제 브라우저에서 보이고 있는 DOM과 

메모리에 있는 DOM(Virtual DOM)과 비교를 하고 여기서 차이점을 감지를 하고 나서 감지한 것을 실제 DOM에다가 

patch를 해준다. 즉 차이를 확인해서 필요한 변화를 반영시켜주는 것이다. 

이를 통하여 리액트에서는 정말 필요한 변화만 발생시키게 되면서 업데이트를 어떻게 할지에 대한 고민을 

하지 않으면서도 빠른 성능을 지켜낼 수 있게 되었다.

 

그래서 앞으로 리액트를 사용해서 웹 애플리케이션을 개발하게 될 때에는 UI를 어떻게 업데이트할지에 대한 고민은

하지 않고 그 대신 UI가 어떻게 보여야 하는지에 대하여 집중을 하면서 프로젝트를 개발하게 될 것이다. 

 

리액트에서는 UI를 '컴포넌트'라는 것을 사용해서 선언을 하게 된다. '컴포넌트'라는 것은 일종의 UI조각이라고 

이해하면 된다. 컴포넌트라는 것에 정말 다양한 기능이 들어있다. 컴포넌트에 대해서는 앞으로 더 자세하게

알아볼 예정이다.