한때 자바스크립트는 웹 브라우저에서 간단한 연산이나 시각적 효과를 주는 단순한 스크립트 언어에 불과했지만, 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 서버사이드, 모바일, 데스크톱 애플리케이션등 다양한 방면에서 활약합니다.
이제 자바스크립트만 이용해도 규모가 큰 애플리케이션을 만들 수 있는 시대이고 대규모 애플리케이션 중 프론트엔드 사이드에서 돌아가는 애플리케이션 구조를 관리하려면 순수하게 자바스크립트로 관리하려고 할 때는 많은 문제가 발생하므로 이를 해결하고자 하는 수많은 프레임워크를 사용합니다.
이 프레임 워크들은 주로 MVC (Model-View-Controller) 아키텍처, MVVM (Model-View-View-Model) 아키텍처를 사용하며 AngularJS의 경우에는 MVW (Model-View-Whatever) 아키텍처로 애플리케이션을 구조화 합니다.
MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 것이고, 모델은 애플리케이션에서 사용하는 데이터를 관리하는 영역이고, 뷰는 사용자에게 보이는 부분입니다. 프로그램이 사용자에게 어떤 작업 (버튼 클릭, 텍스트 입력)을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고 변경된 사항을 뷰에 반영합니다.
반영 과정에서 보통 뷰를 변형합니다. 예를 들어 다음 JSON 객체 값을 사용하는 뷰가 있다고 가정하면
like 값을 2로 수정하려면 애플리케이션의 post_1의 likes 요소를 찾아 내부를 수정해야 합니다.
수정하는 항복에 따라 어떤 부분을 찾아서 변경할지 규칙을 정하는 작업은 간단하나, 애플리케이션 규모가 크면 상당히 복잡해지고 제대로 관리하지 않는다면 성능도 떨어질 수 있습니다.
페이스북 개발팀은 이를 해결하고자 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라
기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식
을 고안하는데, 이렇게 하면 애플리케이션 구조가 간단하고, 작성해야 할 코드양도 많이 줄어들게 됩니다. 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그냥 뷰가 어떻게 생길지 선언만하고, 데이터에 변화 발생시 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링하면 됩니다.
하지만 이 방식은 웹브라우저의 CPU 점유율도 크게 증가할 것이고, DOM은 느립니다. 메모리도 많이 사용하게 될 것이고 사용자가 인풋 박스에 텍스트를 입력할 때 기존에 렌더링된 것은 사라지고, 새로 렌더링하면 끊김 현상이 발생할 것입니다.
페이스북 개발 팀이 앞서 설명한 방식으로 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 개발한 것이 바로
리액트 입니다.
