프론트엔드 공부를 시작하면서 프론트엔드 라이브러리와 프레임워크를 사용하게 되었다. 다양한 프레임워크들이 있지만, 흔히들 말하는 프론트엔드 프레임워크 3대장은 React, Vue.js, Angular로, 그 중에서도 React의 사용률이 월등히 높다.
▲ 지난 1년간 Angular vs React vs Vue.js NPM 다운로드 수 비교(출처: npm trends)
나 역시 React를 사용하고 있지만, 단순히 '인기 있는 라이브러리라서', '자료를 찾아보기 용이해서'와 같은 이유로 사용중이기에, 이번 기회를 통해 해당 라이브러리를 사용했을 때의 장점이 무엇인지에 대해 알아보고자 한다.
📌프레임워크(라이브러리)란?
프론트엔드 프레임워크는 정적인 웹 페이지에서 동적으로 유저 인터랙션을 처리하는 웹 애플리케이션으로 규모가 커짐에 따라 개발을 용이하게 하기 위해 등장하게 되었다.
정적인 페이지는 웹 서버에 미리 저장된 파일을 그대로 전달하는 방식이다. 사용자가 요청을 보내면 서버는 그에 해당하는 저장된 웹 페이지를 보내준다. 단순 정보 전달을 목적으로 하는 경우에 적합하고, 추가적인 작업이 필요하지 않다.
반면, 동적인 페이지는 사용자의 요청 정보를 가공 처리한 후 생성된 웹 페이지를 전달하는 방식이다. 사용자의 행동 흐름에 따라 달라지며, 동적으로 페이지를 구성함으로써 웹을 더욱 다양하게 활용할 수 있게 되었다.
프레임워크는 프로그램 개발을 위한 뼈대를 제공하여 더욱 편리하게 개발할 수 있도록 해주는 프로그램, 라이브러리는 개발 도구들의 모음이라고 보면 될 것 같다.
📌React를 사용하는 이유
React는 Facebook에서 만든 자바스크립트 기반의 UI 라이브러리이다. Facebook에서 개발하고 관리하므로 지속적인 업데이트 부분에서 신뢰도가 높다.
React를 사용했을 때의 장점은 다양하다.
🔎Virtual DOM
Virtual DOM은 React의 가장 큰 특징 중 하나라고 할 수 있다.
기존의 DOM은 변화가 발생할 때마다 새 DOM을 그리며 DOM 전체를 바꾸는 방식이다. 일정 부분만 업데이트 해도 됨에도 불구하고 DOM 전체를 바꾸는 것은 비효율적이므로 이러한 문제를 보완하기 위해 Virtual DOM이라는 개념이 등장하였다.
Virtual DOM은 변화가 발생하여 DOM에 적용해야 할 때, Virtual DOM이라는 DOM을 추상화한 가상의 객체에 우선 적용시켜 달라진 부분만 실제 DOM에 업데이트하는 방식이다. 따라서 기존 DOM을 사용하는 방식보다 더 빠르고, 불필요한 업데이트를 줄일 수 있다.
🔎SPA(Single-Page-Application)
SPA(Single-Page-Application)이란 서버로부터 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성하는 웹 애플리케이션을 의미한다. 하나의 HTML 페이지에 애플리케이션 실행에 필요한 Javascript, CSS 같은 모든 자산을 로드한다.
페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념이다. 요청 URL에 따라 브라우저에서 해당 URL의 컴포넌트들을 호출한다.
페이지 갱신에 필요한 데이터만을 전달받아 페이지를 업데이트하므로 전체적인 트래픽이 감소된다.
🔎Client-Side-Rendering
React는 Client-Side-Rendering 방식으로 동작하고, SPA를 만들 수 있도록 지원하는 라이브러리이다. 기본적으로 HTML은 비어있고, Javascript가 동작하면서 데이터만을 주고 받아서 클라이언트에서 렌더링을 진행한다.
React 코드가 Javascript 코드로 변환 된 bundle.js를 갖고, 브라우저가 그 Javascript 코드를 실행해서 DOM을 그린다. 페이지 전체를 요청하지 않고 필요한 부분만 변경하게 하기 때문에, 모바일 네트워크에서도 빠른 속도로 렌더링이 가능하다.
하지만 서버에서 내려 받는 HTML은 비어있는 상태이므로, 검색 엔진 최적화(search engine optimization, SEO)에 불리하다는 단점이 있다.
🔎Component 단위 작성
Component는 UI를 구성하는 개별적인 뷰 단위로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 한다. 컴포넌트라는 블록을 조립해 하나의 UI를 만드는 것과 같다.
컴포넌트 단위 개발은 하나의 컴포넌트가 여러 부분에서 사용된다면 더욱 빛을 발한다. 컴포넌트는 재사용성이 매우 용이하여 공통적으로 사용되는 부분을 컴포넌트로 만들어 놓으면 컴포넌트를 가져다 쓰기만 하면 된다.
이는 생산성과 유지 보수를 좋게 한다. 하나의 요소의 변화가 다른 요소들의 변화에 영향을 미치는 복잡한 로직을 업데이트하는 까다로운 작업의 경우, 컴포넌트의 재사용 기능으로서 보완할 수 있게 된다.
마무리
지금까지 React를 사용하는 이유에 대해 알아보았다.
React의 사용률이 높은 데에는 그만한 이유가 있는 것 같다. 위에서 반복적으로 언급되는, 불필요한 업데이트를 줄일 수 있고 반응이 빠르다는 점이 가장 큰 장점인 것 같다. 또한 초반에 언급했듯이 많은 사람들이 사용해서 자료를 찾아보기 용이하다는 이유도 배제할 수는 없을 것 같다.
하지만 프론트엔드 프레임워크(라이브러리)는 React를 제외하고도 다양하므로 상황에 따라 맞는 것을 사용하면 될 것 같다.
📕 참조
