React란?

Front-end Framework / Library

 최근 웹 애플리케이션 개발은 대부분 프론트엔드 프레임워크/라이브러리를 사용하여 만들어집니다. 그렇다면 왜 이런 프레임워크나 라이브러리를 사용할까요?

 물론 프레임워크나 라이브러리를 사용하지 않고 HTML, CSS와 단순한 javascript만을 이용하여 웹 페이지를 개발할 수 있습니다. 하지만 최근의 웹은 유저의 행동에 따른 다양한 데이터 및 UI 변화를 요구하고 있습니다. 이런 부분을 프레임워크나 라이브러리 없이 한다고 하면 상당히 관리적인 측면에서 어려움을 겪을 것입니다. 이러한 이유로 웹 애플리케이션 개발에서는 프론트엔드 프레임워크/라이브러리를 채택하고 있습니다.

 이 중에서 최근 핫한 3대장이 Angular, React, Vue 입니다. 개발에 필요한 스펙을 확인하고 서로의 장단점을 비교한 후 자신의 입맛에 맞는 프레임워크나 라이브러리를 선택해서 사용하면 됩니다.

React란?

 Facebook에서 개발한 컴포넌트(Components) 기반의 Javascript UI Library 입니다. 싱글 페이지 애플리케이션(SPA)이나 모바일 애플리케이션을 개발할 때 사용할 수 있습니다. 하지만 React는 프론트엔드 라이브러리인 만큼 UI 이외의 라우트, 상태관리 같은 기능들이 내장되어 있지 않습니다. 이 부분은 React와 함께 Third-Party Library를 사용하면 됩니다. 현재 해외뿐만 아니라 국내의 다양한 기업들이 사용하고 있고 특히 스타트업에서 개발자를 뽑을 때 필요한 자격 요건에 넣는 회사들이 많습니다. 

Facebook은 왜 React를 만들었을까?

 기존에 다양한 프레임워크들이 존재했습니다. 이런 프레임워크들은 보통 MVC, MVVM, MVW 등의 디자인 패턴을 사용하여 만들어졌습니다. 여기서 공통적으로 사용되는 M(model)은 UI 로직과 서비스 로직의 양방향 바인딩을 통하여 서로의 모델의 값(데이터)를 동기화시킵니다. 둘 중하나의 데이터가 변경되면 다른 한쪽도 변경됩니다. 처음 화면을 하나 그린후 변경 사항이 있으면 변경된 부분만 바꿔줍니다. 하지만 이런 과정은 상당히 복잡한 작업이 될 수 있습니다. 특정 이벤트가 발생했을 때, 데이터에 변화가 생기고, 그 변화에 따라 특정 DOM을 선택적으로 가져와 뷰를 업데이트 해주어야합니다. 여기서 페이스북은 '특정 이벤트가 발생하면 뷰를 업데이트 시키지말고 해당 뷰를 날려버리고 새로 만들면 어떨까?' 라는 발상을 했습니다. 하지만 DOM 기반으로 작동하는 페이지에서 이벤트가 발생할 때마다 뷰를 새로 그리면 성능상 엄청난 문제가 발생할 수 있습니다. 이를 해결하기 위해 가상의 DOM(Virtual DOM)을 사용하기로 했습니다. 이를 통해 React는 단반향 데이터 바인딩을 할 수 있습니다.

Virtual DOM이란?

 Virtual DOM이란 말 그대로 가상의 DOM으로 이벤트로 인해 데이터가 변하면 실제 브라우저의 DOM에 새로운 것을 넣는 것이 아니라 javascript로 이루어진 Virtual DOM에 한 번 렌더링(rendering)하고, 기존의 DOM과 비교한 후 변화가 필요한 곳에만 업데이트를 해주는 것입니다. 이 Virtual DOM을 사용하여 DOM의 변화를 최소화시켜줍니다. 이것이 성능에서 매우 중요한 요소입니다. 현재 React외에도 여러 프론트엔드 프레임워크/라이브러리에서도 Virtual DOM을 사용하고 있습니다.

References

[Velopert 블로그 리액트란 무엇인가] https://velopert.com/3612

[React 시작하기] http://webframeworks.kr/tutorials/react/getting-started/