자바스크립트는 현재 웹 애플리케이션에서 가장 핵심적인 역할을 한다.
더 나아가 영역을 확장하여 서버 사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청나게 활약한다.
이제 자바스크립트만으로도 규모가 큰 애플리케이션을 만들 수 있는 시대가 왔다.
대규모 애플리케이션 중 프런트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 어떻게 해야할까?
수많은 자바스크립트 프레임워크가 이를 해결하려고 노력해왔다.
자바스크립트 기반 프레임워크:
Angular, Backbone.js, Derby.js, Sammy.js, PureMVC, Vue.js ...
이 프레임워크들은 주로 MVC 아키텍처, MVVM 아키텍처를 사용한다.
이 구조들의 공통점은 모델(Model)과 뷰(View)가 있다는 것.
모델은 데이터를 관리하는 영역, 뷰는 사용자에게 보이는 부분.
데이터를 업데이트 하는 항목에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 작업은 간단하지만,
애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않으면 성능이 떨어질 수도 있다.
페이스북 개발팀은 이를 해결하기 위해, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 랜더링하는 방식을 고안해냈다.
앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 리액트다.
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용한다.
오직 뷰(View)만 신경쓰는 라이브러리다.
리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(component)라고 한다.
사용자 화면에 뷰를 보여주는 것은 렌더링이라고 한다.
초기 렌더링
어떤 UI 프레임워크나 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다.
리액트에는 이를 다루는 render함수가 있다.
이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다.
이 함수는 html 형식의 문자열이 아니라 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다.
조화 과정
리액트에서 뷰를 업데이트할 때는 "업데이트 과정을 거친다" 보다 "조화 과정(reconciliation)을 거친다"라고 하는 것이 더 정확한 표현이다.
컴포넌트에서 데이터에 변화가 있을때 변화에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소로 갈아 끼우기 때문이다.
컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라 새로운 데이터를 가지고 render 함수를 또 다시 호출한다. render 함수는 새로운 데이터를 지닌 뷰를 생성한다.
하지만 이때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교한다.
자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트한다.
