React를 사용해야하는 이유

 

React란 무엇인가?

 

A JavaScript library for building user interfaces

 

최근 웹페이지들은 사용자와의 인터랙션이 많고 UI를 동적으로 표현해야하는 경우가 많다.

이런 상황에서 만약 HTML, CSS, JavaScript 만으로 웹페이지를 구성해야한다면

DOM을 조작하고 업데이트 해야할 때 코드가 굉장히 복잡해질 것이다.

왜냐하면 JavaScript로  DOM을 조작하려면 document.getElementById('blabla') 와 같이 직접 DOM을 선택하고,

다양한 이벤트핸들러를 통해 업데이트 하는 작업을 해야하므로 유지보수 하기가 어려워질 수 있다.

 

따라서 웹페이지를 개발할 때 필요한 DOM 관리 및 상태값 업데이트 관리 등의 작업을 최소화하고,

기능 개발, UI 구현에 집중하기 위해 만들어진 것이 바로 React와 같은 자바스크립트 라이브러리다.

 

 

React를 사용해야하는 이유는 무엇인가?

 

자바스크립트 라이브러리는 React 외에 Vue.JS, AngularJS 등이 있다.

다른 라이브러리들을 제치고 React를 사용해야하는 이유는 무엇일까?

 

https://www.bytestechnolab.com/wp-content/uploads/2019/04/Virtual-DOM-compressor.jpg

 

Reason 1. Virtual DOM을 통해 업데이트에 대한 고민을 하지 않아도 된다.

 

Virtual DOM은 메모리에 가상으로 존재하는 DOM이다.

React는 상태가 업데이트 되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링하고,

실제 브라우저와 Virtual DOM을 비교한 후에 차이가 있는 부분만을 실제 DOM에 patch 시켜준다.

즉, 우리는 업데이트에 대한 고민을 하지 않아도 되고 빠르게 동적인 UI를 보여줄 수 있게 되었다.

 

 

https://2018.stateofjs.com/front-end-frameworks/overview/

 

Reason 2. 넓은 생태계와 프로젝트에 대한 전적인 지원

 

React는 페이스북이라는 글로벌 대기업이 만든 라이브러리이다.

그렇다는건?

페이스북이 React를 가장 좋은 기술로 만들기 위해 많은 돈과 시간을 투자하고 있다는 것이다.

이로 인해 많은 개발자들이 React에 많은 관심을 가지고 커뮤니티가 확대됨으로써 넓은 생태계를 가질 수 있게 됐다.

그리고 Redux, Router 등 React와 관련된 라이브러리도 많이 등장하고 있다.

 

 

Reason 3. 캡슐화된 Component 기반

 

React는 캡슐화된 많은 Component들을 조합하여 복잡한 UI를 쉽게 만들 수 있다.

그리고 중복되는 요소들을 재사용하기 쉽다.

예를 들어 템플릿은 똑같은데 컨텐츠만 다를 경우에는 하나의 컴포넌트를 재사용하여 출력할 수 있다.

따라서, 가독성, 재사용성, 유지보수 용이성이 높아지므로 쉽게 상태를 관리할 수 있다.

 

 

Reason 4. 사용자 경험 극대화

 

웹에서 앱과 같은 사용자 경험을 만들어준다. 

예를 들어 홈페이지에서 각각 카테고리로 넘어갈 때 페이지가 로딩되어 새로 출력되는 것이 아니라,

앱처럼 자연스럽게 로딩없이 바로 출력된다는 것이 React의 장점이다.