[벨로퍼트] 리액트는 무엇인가

프론트엔드 라이브러리/프레임워크

리액트는 정말 인기있는 프론트엔드 라이브러리이다. 요즘의 웹은 단순히 웹 페이지가 아니라 웹 애플리케이션이다. 어떠한 UI를 동적으로 나타내기 위해서는 수많은 상태를 관리해줘야한다. 프로젝트가 사용자와의 인터랙션(상호작용)이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요하지 않다. 하지만 프로젝트의 규모가 커지고, 다양한 UI와 인터랙션을 제공하게 된다면, 많은 DOM 요소들을 직접 관리하고 코드를 정리하는 것은 갈수록 힘든 일이 될 것이다. 웹 개발을 하게 될 때 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발과 UI를 구현하는 것에 집중할 수 있도록 하기 위해서 여러 라이브러리나 프레임워크들이 만들어졌다. 대표적으로 Angular, Ember, Backbone, Vue, React 등..!

 

2017년 기준으로 이 프론트엔드 동네에서는 3대장으로 Angular, React, Vue가 있다. 결국 이 세가지 라이브러리는 똑같은 문제를 다른 방식으로 해결할 뿐, 이 중에서 하나를 고르라고 하는 것은 답이 없는 문제이다. "장인은 도구를 탓하지 않는다." 훌륭한 개발자는 뭘 선택하든지 훌륭한 프로젝트를 만들어 낼 수 있을 것이다.

 

그 중 리액트는 "컴포넌트"라는 개념이 집중되어있는 라이브러리이다. 컴포넌트는 추후 더 자세히 배우겠지만, 데이터를 넣으면 지정한 UI를 조립해서 보여준다. 페이스북 개발자들이 라이브러리의 성능과 개발자 경험을 하기 위해 많은 연구를 한다. 리액트를 한번 해본 개발자들은 대부분 마음에 들어한다. 생태계가 엄청 넓고, 사용하는 곳도 많다. HTTPClient, 라우더, 심화적 상태 관리 등의 기능들은 따로 내장되어 있지 않다.

 

페이스북은 왜 리액트를 만들게 됐을까?

페이스북이 리액트를 만들기 전에도 이미 Angualr, Backbone 등 많은 프레임워크들이 존재했다. 그리고 해당 프레임워크들은 데이터단을 담당하는 모델(Model), 사용자의 화면에 보여지게 되는 뷰(View), 사용자가 발생하는 이벤트를 처리해주는 컨트롤러(Controller)로 이루어진 MVC 패턴, 그리고 MVC에서부터 파생된 MVVM(ViewModel), MVW(Watever) 등의 패턴들로 이루어져있다. 여기서 공통점은 바로 "모델"이다. 방금 언급했던 프레임워크들의 모델은 대부분 어떻게 작동하냐면, 양방향 바인딩을 통하여 모델에 있는 값이 변하면, 뷰에서도 이를 변화시켜준다.

여기서 핵심적인 부분은 "변화시켜준다"는 부분이다. 일단 첫 화면을 보여주고 변화에따라 필요한 곳을 바꿔주는 것이다. "변화"라는 것은 상당히 복잡한 작업이다. 특정 이벤트가 발생했을때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로 뷰를 업데이트해줄 지 로직을 정해줘야하는데, 그래서 사용하는게 바로 Virtual DOM 이다. Virtual DOM은 가상의 DOM이다. 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 것을 넣는 것이 아니라, 자바스크립트로 이루어진 가상 DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 것이다.

---

누구든지 하는 리액트 1편: 리액트는 무엇인가 | VELOPERT.LOG