React를 다루는 기술 01 - React를 사용하는 이유

JavaScript만으로도 대규모 어플리케이션을 만드는 시대가 왔다.
브라우저 상의 웹페이지만이 아니라 JavaScript를 이용해 데스크톱 어플리케이션을 만들 수 있는 Electron을 통해 Slack, VS Code 등의 어플리케이션이 만들어지고 모바일용 어플리케이션도 JavaScript 기반으로 만드는 것이 대세가 되고 있다.
이러한 상황에 맞춰 다양한 Angular.js, Vue.js, React.js, Backbone.js 등 JavaScript 프레임워크가 등장하게 된다.

보통 JavaScript 프레임워크들은 MVC(Model - View - Controller)나 MVVM(Model - View - View Model)과 같은 아키텍처로 이루어져있으며 Model에서 출발해 View로 도착해 페이지를 출력해주는 구조를 가진다.
여기서 값이 업데이트 될 경우 View를 변형(Mutate)해줘야하며 DOM 구조를 따라 변경된 위치를 찾아 값을 변경해주게 된다.
그런데 이런 구조는 간단한 페이지에선 쉽지만 복잡한 어플리케이션일수록 난이도가 급격히 상승하며 프로젝트 구조를 생성하는데 장벽이 될 수 있다.

이에 페이스북 개발자들은 업데이트가 발생하면 View를 처음부터 다시 만드는 방식을 생각해냈다.
하지만 수시로 발생하는 업데이트마다 View가 반복적으로 재생성되는 것은 성능적인 측면에서 큰 문제를 야기할 것이 뻔했는데 이러한 문제를 해결하기 위하여 만들어진 것이 React이다.

React의 이해

React는 다른 프레임워크와는 달리 View만 존재한다.
사용자의 화면에 View를 보여주는 것을 렌더링이라고 하며 React는 수많은 기능을 내장한 Component를 통해 View를 구성하고 있으며 이를 렌더링하여 어플리케이션을 구현한다.
Component는 내부에 다른 Component들을 포함할 수 있으며 이것들을 렌더링하는 과정을 크게 초기렌더링, 조화과정으로 나눈다

1. 초기렌더링
   React Component 파일을 확인해보면 빠지지 않고 포함되어 있는것이 render() 함수이다.
   이 render() 함수는 Component를 렌더링하여 객체를 반환하는 기능을 하는데 React는 이 객체를 이용하여 DOM에 View를 그린다.

2. 조화과정
   페이지가 업데이트되었을 때 이루어지는 과정이다.
   초기렌더링과 마찬가지로 render() 함수를 실행하고 객체를 반환받는다.
   그리고 DOM으로 바로 넘기는 것이 아니라 DOM과 비교하여 어느 부분이 달라졌는지 확인하고 달라진 부분만을 찾아 새로 그린다.
   이를 통해 업데이트가 이루어질 때마다 새로 DOM을 그리면서도 성능적인 부분을 안정시킬 수 있다.

출처자료

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=209354690 (리액트를 다루는 기술(개정판))