1. Component 기반의 UI 라이브러리
Component 기반의 UI 라이브러리는 UI를 독립적인 Component로 분리하여 개발하는 방식이다. 분리한 각각의 Component는 UI 요소, 관련된 동작을 가지고 있고, 재사용, 모듈성을 높였다.
개발자는 Component 기반의 UI 라이브러리를 사용하여 분리한 Component들을 합쳐서 복잡한 UI를 만들 수 있다. 또한 개발자가 코드를 재사용하고 유지보수하기 쉬워진다.
대표적인 Component 기반의 UI 라이브러리는 React, Angular, Vue등이 있다.
2. 선언형 프로그래밍 방식
명령형 프로그래밍은 절차를 하나하나 다 나열해야 한다. 예를 들어 Plus 버튼을 누르면 +1, Minus 버튼을 누르면 -1을 하는 기능이 있다면,
- 결과를 표시할 요소를 가져온다.
- 현재 결과값을 10진수 기준, 숫자형으로 변환해서 가져와 상수에 저장한다.
- 상수에 저장된 값을 결과를 표시할 요소의 값에 Plus 버튼을 클릭했다면 +1, Minus 버튼을 클릭했다면 -1해서 넣는다.
선언형 프로그래밍은 원하는 목적을 바로 말한다.
- Plus 버튼을 누르면, 결과를 표시할 요소에 +1, Minus 버튼을 누르면 -1을 한다.
명령형 프로그래밍 방식으로 웹서비스를 설계하는 대표적인 기술은 JQuery가 있고, 선언형 프로그래밍 방식으로 웹서비스르를 설계하는 대표적인 기술은 React가 있다.
3. Virtual DOM
먼저 DOM이란 Document Object Model, 즉 브라우저가 실제로 사용하는 객체이다. 웹브라우저가 HTML을 해석해서 사용자에게 보여줄 때, 트리형태의 객체로 변환시켜 놓은 것을 말한다.
DOM을 변환하는 과정을 계속 진행하면 필요 이상으로 많은 연산을 수행하게 되어서 성능저하가 발생한다. React는 이 문제를 해결하기 위해 Virtual DOM을 사용한다.
수정하는 과정을 실제 DOM에 진행하는 것이 아니라 Virtual DOM에 수정을 한다. 이 과정에서 실제 DOM이 아니기 때문에 수정할 때 마다 Rendering 과정을 거치지 않고 모아서 한 번에 Rendering을 한다.
간단히 말해 5번 수정을 해야한다면, 모아서 1번만 수정한다는 것을 의미한다. React를 사용하면 Virtual DOM을 자연스럽게 사용할 수 있다.
즉, React는 Component 기반 UI 라이브러리, 선언형 프로그래밍 방식을 통한 웹페이지 설계, Virtual DOM등의 이유로 많은 프론트엔드 개발자들이 사용하고 있다.
