1. React, Angular, Vue

대표 3인방

Front-end 프레임워크와 라이브러리들은 데이터 변화가 많은 프로젝트에서 DOM 관리와 상태 관리를 최소화하여 개발자가 사용자 인터페이스에만 집중할 수 있도록 개발자 편리를 위해 만들어졌습니다. 특히 Front-end의 대표적인 프레임워크와 라이브러리는 Angular, React, Vue 이렇게 세 가지가 있습니다.

 

Angular - 구글에서 개발했고 client-side 그리고 브라우저 기반의 자바 스크립트 프레임 워크입니다. 서버와 통신하며 HTML 페이지를 reload하지 않고 웹 페이지를 빠르고 효율적으로 렌더링합니다. 또한 앵규러는 all-in-one framework로 다양한 기능을 가지고 있으며 공식 라이브러리들이 존재합니다.

 

React - 리액트는 페이스북에서 만들었고 사용하는 자바 스크립트 라이브러리입니다. 리액트는 컴포턴트 개념에 집중하여 개발되었고 사용자에게 전달되는 View에 초점을 맞추고 나머지 기능은 3rd party에서 해결합니다. 따라서 문제 해결에 있어 많은 방안이 존재하며 사용자 커뮤니티가 넓다는 장점이 있습니다.

 

Vue - 구글의 전 개발자 Evan You에 의해 개발되었고 러닝 커브가 앞선 두 개보다 낮다는 장점이 있습니다. 따라서 입문자가 사용하기 좋으며 점점 사용자가 많아지고 있는 라이브러리입니다.

 

 

각 프레임워크와 라이브러리마다 장단점과 서로가 추구하는 철학이 분명하여 무엇이 좋다 나쁘다라고 말할 수는 없습니다. 따라서 개발자 개인이 좋아하는 것을 프로젝트를 고려하여 잘 선택하면 그것이 가장 좋은 선택이라고 생각할 수 있습니다.

 

저는 아무래도 생태계가 가장 크고 한국에서 많이 사용하고 있는 react를 활용해 보도록 하겠습니다.

 

 

 

React

 

리액트는 언급하대로 사용자 인터페이스를 위한 자바스크립트 라이브러리입니다. 리액트는 지속적으로 데이터가 변화하고 사용자와 인터랙션이 많은 대규모 애플리케이션을 구축하기에 알맞게 설계되었습니다. 흔히 웹에서는 Model이 변하면 사용자가 보고 있는 View도 변해야 하고 또한 View에서 이벤트를 발생시키면 Model이 요청에 맞게 변해야 합니다. 이를 Mutation이라고 하는데 이 Mutation이 일어나기 위해서는 변화가 일어나는 순서와 로직을 정해야 합니다. 그런데 리액트는 이렇게 생각합니다.

 

mutation 말고 아예 View을 날려버리고 새로 만드는 게 낫지 않을까?

하지만 당연하게도 작은 변화에도 DOM이 업데이트되고 View를 처음부터 다시 그린다면 엄청나게 성능이 저하될 것입니다. 따라서 리액트는 Virtual DOM을 사용하여 기존의 DOM과 비교한 뒤 바뀐 부분을 다시 그려서 바꿔줍니다.

 

Virtual DOM

virtual DOM은 말 그대로 가상의 DOM입니다.실제 DOM에서 계속해서 전부 새로 만들고 렌더링 한다면 작은 변화에도 많은 연산을 수행해야 하고 이는 성능 저하로 이어집니다. 따라서 Virtual DOM을 이용해 실제 DOM과 비교하여 변화된 부분을 감지하고 변화된 부분만 수정하여 렌더링 하도록 합니다.

즉, 새로 그린 View를 react로 넘겨주면 react에서 실제 DOM과 새로 그린 View를 Virtual DOM을 사용하여 서로 비교하고 실제 DOM에 변경된 부분만 변경해주는 작업을 수행합니다.

 

 

 

 

 

사실 Virtual DOM은 react만의 특별한 특징은 아닙니다. 다양한 프레임워크가 Virtual DOM을 사용하고 있고 실제 Virtual DOM이 실제 DOM보다 무조건 빠르다기보다는 DOM 조작 이후의 일들을 처리하지 않기 때문에 적당히 빠르다고 볼 수 있습니다. 따라서 리액트를 사용할 때에도 최적화를 잘하여 좋은 성능을 낼 수 있도록 주의를 요해야 합니다.

 

 

 

 

 

 

reference

---

  https://velopert.com/3613

누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌 | VELOPERT.LOG

https://www.youtube.com/watch?v=muc2ZF0QIO4