리액트 강좌 1편: 리액트 맛보기

리액트를 왜 사용할까?

리액트는 훌륭한 프론트엔드 라이브러리입니다. 이것이 왜 필요한지 알아보겠습니다.

 

웹사이트를 만들기 위해서는 이러한 라이브러리 없이 html, css만으로도 만들 수 있습니다. 이렇게 정적 페이지를 만드는 건 그리 어렵지 않습니다. 

 

여기에 자바스크립트를 사용하면 동적으로 페이지를 보여줄 수 있습니다.

 

이렇게 한다면 단순한 페이지가 완성이 됩니다.

 

요즘 웹을 개발하는 방식을 보면, 이러한 단순한 웹이 아닌 웹 애플리케이션이라고 부릅니다.

유저 인터페이스를 동적으로 보여주기 위해서는 많은 상태의 관리를 해줘야 합니다.

 

예시로 가기전에 웹페이지가 어떻게 우리 눈에 보이게 되는지 이 과정을 설명하겠습니다.

 

DOM은 Document Object Model 입니다. 즉 웹 페이지에 대한 유저 인터페이스입니다.

 

DOM은 HTML 문서를 읽어드려 생성이 됩니다. 

출처 : https://wit.nts-corp.com/wp-content/uploads/2019/02/-1

이렇게 생성된 DOM 은 CSSOM을 거쳐서 랜더 트리가 생성이 됩니다.

 

랜더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성이 됩니다. 브라우저는 랜더 트리를 생성하기 위해 방금 언급했던 DOM, CSSOM이 필요합니다.

 

이 과정을 거쳐서 다음 Layout, Paint, Composite 과정을 거쳐서 우리가 볼 수 있는 웹페이지를 생성하게 됩니다.

 

이렇게 웹페이지가 어떠한 과정을 통해 우리 눈에 보이는지 알았다면 이걸 어떻게 효율적으로 관리하고 업데이트 관리를 최소화, 사용자 인터페이스를 구현하는지 알아보겠습니다.

 

리액트 알아보기!

 

예시로 이러한  HTML 코드가 있습니다.

<div id="test"> Test </div>

Test라는 값을 관리하려면 DOM 요소에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 작업을 해야 합니다.

var test = document.getElementById('test');

이런 식입니다.

 

만약 이렇게 관리해야 할 DOM이 많아진다면 관리하기 어려워질 것입니다. 이 많은 DOM을 관리하기 위해서는 많은 규칙들을 만들어내야 하기 때문입니다. 많은 번거로움이 있습니다.

 

이러한 DOM관리를 더 효율적으로 관리하기 위해 웹 라이브러리 혹은 프레임워크를 사용합니다. 예를 들어 리액트 같은 겁니다.

 

리액트는 컴포넌트라는 개념에 집중되어 있는 라이브러리입니다. 데이터를 넣으면 유저 인터페이스를 만들어 보여줍니다. 요즘 기업들이 웹 애플리케이션을 효율적으로 관리하기 위해 리액트를 많이 채택합니다. 

 

리액트는 누가 왜 만들었을까?

페이스북이 리액트를 개발했습니다. 이유는 저야 모르겠습니다. 귀차니즘과 자신들이 이만큼 대단한 걸 보여주기 위해 만든 것이 아닐까요? 사실 이 해당 라이브러리가 개발되기 전에도  Angular, Backbone, Knockout.js, Ember 등의 수많은 라이브러리와 프레임워크들이 있었습니다. 이 해당 라이브러리 혹은 프레임워크들은 데이터단을 담당하는 모델, 사용자 화면에 보이게 되는 뷰, 사용자가 발생시키는 이벤트를 처리해주는 컨트롤러로 이루어진 MVC 패턴, 그리고 MVVM, MVW 등의 패턴들로 이루어져 있습니다.

 

MVC, MVVM, MVW들의 공통점은 모델입니다. 위에 언급했던 라이브러리, 프레임워크들의 모델은 양방향 바인딩을 통해 모델에 있는 값이 변하면 뷰에서도 변화에 따라 필요한 곳을 바꿔줍니다.

 

이 변화라는 작업은 복잡합니다. 특정 이벤트가 발생하면, 모델에 변화를 일으키고, 변화에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트해줘야 하는지 로직을 정해야 합니다.

 

페이스북은 이러한 복잡한 변화라는 작업 대신에, 데이터가 바뀌면 뷰를 날리고 새롭게 만드는 발상을 했습니다. 이렇게 해서 만들어진 것이 Virtual DOM입니다.

 

변화가 일어나면, 실제로 브라저의 DOM에 새로운 것을 넣지 않고, 자바스크립트로 이루어진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 해서 업데이틀 해줍니다.

 

Virtual DOM 은DOM의 변화를 최소화시켜주는 역할을 합니다. 이렇게 변화시키는 횟수를 최소화하는 것만으로도 성능적으로 매우 중요한 이슈입니다.

 

이렇게 리액트를 간단하게 알아보았습니다.