곰돌이 놀이터
[React] 내가 React를 선택한 이유 본문
나는 개발 트렌드를 구직사이트를 통해 얻고는 한다. 특히, 개발자 모집공고의 지원자격 서치를 통해 웹 개발 환경의 발전에 따른 개발 트렌드의 변화에 주목하는 편인데 이러한 트렌드의 변화중 한가지로 어느 순간부터 프론트엔드 개발자 자격요건이 'Jquery 라이브러리 사용가능자' 에서 'Angular, React, Vue 등의 라이브러리, 프레임워크 경험 및 가능자'로 급격히 바뀌기 시작하더니 현재는 많은 기업에서 요구하는 스펙이 되었다는 것이다.
이처럼 컴퓨터 엔지니어링 분야의 변화가 굉장히 다이나믹 하여 매년 끊임없이 새로운 언어들이 쏟아져 나오고 있고 기존 언어의 문제점들을 보강하며 새로운 방법론의 제시와 함께 업데이트가 이루어지고 있는데 그만큼 기존의 많은 언어나 기술들이 뒤쳐지며 사라지기도 한다.
때문에 우리는 트렌드를 따르는 직업을 가진만큼 트렌드에 민감해져야 할 필요가 있으므로, 이번 포스트를 통해 프론트엔드 프레임워크의 필요성과 프론트엔드 프레임워크중에서도 React 를 선택한 이유에 대해 정리를 해보려고 한다.
프론트엔드 라이브러리, 프레임워크의 등장
더욱 동적이고 복잡해진 웹 페이지
모든 웹 페이지를 만들기 위해서 굳이 프론트엔드 라이브러리를 사용해야 할 필요는 없다. 단순히 HTML과 CSS, 그리고 순수 자바스크립트 만으로도 웹 페이지를 얼마든지 제작할 수 있다. 특히, 정적 페이지를 만드는 것이 목적이라면 프론트엔드 라이브러리나 프레임워크의 도움은 필요하지 않을것이다.
하지만 요즘의 웹은 정적이고 단순한 페이지가 아니다. 웹 앱 혹은 웹 어플리케이션이라 불릴 정도로 복잡하고 동적이 되었다. 이처럼 복잡하고 동적인 웹 페이지가 늘이나고 웹의 크기가 커지자, 자바스크립트 파일의 관리가 어려워졌고, 이를 효율적으로 관리하기 위해 backbone.js와 같은 라이브러리가 등장하며 자바스크립트 파일의 조직적 관리가 용이해졌지만 이러한 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 복잡하고 많은 상태를 관리해야 하는 부담이 생겼다. 그 원인으로 웹 페이지는 모든 페이지마다 HTML, CSS, Javascript 파일을 각기 가지고 있어야 했고, 따라서 페이지 간 이동을 할 때마다 HTML, CSS, Javascript 파일을 서버와 주고받아야 하기 때문에 속도가 느릴 수 밖에 없었다.
이때 SPA(Single Page Application)가 등장하게 되는데 SPA는 HTML, CSS, Javascript 파일을 최초 1회만 로드하고, 이후에는 자바스크립트 파일을 통해 DOM 또는 필요한 HTML 파일을 조작하는 방식을 말한다. 이는 서버로부터 완전한 새로운 페이지를 불러오지 않고, jsp파일 없이 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념이다.
이처럼 웹의 발전과 함께 SPA 개발을 위한 ES6, Node.js와 npm 그리고 webpack, Babel과 Angular, React, Vue와 같은 프론트 라이브러리, 프레임워크가 등장하게 되었다.
라이브러리, 프레임워크 차이
2018/07/26 - [기본 개발 지식] - [기본] 플랫폼, 프레임워크, 라이브러리의, API 의 이해
프론트엔드 라이브러리, 프레임워크(앵귤러, 리액트, 뷰)의 등장
작성중..
리액트란
리액트는 페이스북이 만든 사용자 인터페이스(UI) 개발을 위한 라이브러리로 UI 컴포넌트를 만들어 캡슐화를 시켜주기 때문에 재사용성이 높고 한가지 작업만 하기 때문에 단순하고, 다양한 자바스크립트 프레임워크나 라이브러리와 함께 사용도 가능하다. 따라서 기존 코드를 모두 바꿀 필요없이 필요한 부분에서만 조금씩 리액트를 사용할 수도 있다.
특히 리액트는 기존의 라이브러리나 프레임워크와 달리 MVC 패턴이 아닌 그 중에서도 View에만 집중한 라이브러리인데, MVC의 특성상 확장이 어렵고 거대한 시스템에 어울리지 않다고 결론을 내린 페이스북이 이처럼 결정을 내린 것이다. 이유는 모델(Model)과 뷰(View)의 수가 가 커지고 양방향 데이터 플로우 일수록 더욱 복잡해져 디버깅과 코드를 이해하기 어려워지기 때문에 MVC는 작은 앱 개발 시 활용도가 더 높다는 것이다. 이에 좀 더 예측이 가능하도록 코드를 구조화 하기 위해 단방향 시스템 아키텍쳐인 Flux를 제안하게 되었다.
리액트를 사용하는 이유?
복잡하고 동적인 웹 어플리케이션에서 UI를 동적으로 나타내기 위해서는 많은 상태를 관리해야 하는 부담이 생긴다.
만약에 프로젝트 규모가 크고 다양한 UI와의 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하고 복잡하게 늘어진 코드를 리팩토링 하는 것은 점점 힘들게 될 것이고 또한 이러한 복잡한 SPA에서는 DOM 조작이 많이 발생면 매번 브라우저가 연산을 해야 하므로 전체적인 프로세스가 비효율적이 되기 쉽다.
하지만 React의 Virtual DOM을 사용한다면, 실제 DOM에 적용시키기 전 가상의 DOM을 만들어 적용시키고, 최종 완성된 결과만을 실제 DOM으로 전달한다. 이를 통해 브라우저가 진행하는 연산의 양을 줄일 수 있어 성능이 개선된다. Virtual DOM은 렌더링도 되지 않기 때문에 연산 비용이 적다. 모든 변화를 Virtual DOM을 통해 묶고 이를 실제 DOM으로 전달하여 브라우저 전체를 새로고침 하지 않고도 컨텐츠를 빠르게 변경할 수 있다. 뿐만 아니라 React를 사용하면 사용자와 상호작용할 수 있는 interactive한 UI를 쉽게 만들 수 있고 기능과 UI 구현에 집중하고 불필요한 주의력 분산을 줄일 수 있게 된다.
리액트 특징
■ 자바스크립트 기반
리액트는 자바스크립트 기반으로 별도의 프레임워크를 배울 필요가 없으며 자바스크립트를 그대로 활용하면 된다. 앵귤러(Angular)또는 뷰(Vue)처럼 다른 언어를 배울 필요가 없기 때문에 자바스크립트와 HTML을 조금 아는 정도로도 개발이 가능하다.
■ 선언형
사용자 인터페이스를 만들때 쉽고 간결하게 해준다. 애플리케이션 안에서 각각 상태에 따른 디자인 뷰와 연결된 데이터가 변경되면, 이에 맞는 컴포넌트들을 올바르게 랜더링해 화면 구성을 해준다. 이 처럼 선언형의 화면뷰는 예측 가능한 코드 및 쉬운 디버깅을 하게 해준다.
■ 가상 DOM (Virtual DOM)
DOM Tree와 같은 구조체를 Virtual DOM으로 가진다. 'diffing'알고리즘을 통해 문서의 변화를 확인, 'Recomfillation' 진행으로 부분 조작이 가능하다. 무엇보다 DOM을 직접 조작하는 것이 아니라 In-memory의 가상 DOM을 조작하기 때문에 효율적이라고 빠르다.
■ 컴포넌트 (Components)
요소라고 하는 컴포넌트 별로 나누어 개발이 가능하다. 또 이렇게 개발한 것을 다른 곳에 활용할 수도 있다. 또 자바스크립트와 JSX를 조금 사용할 줄 안다면 간단하게 구현이 가능한데 이 때문에 개발을 쉽게 하고 유지보수를 하는데도 큰 장점이다. (*JSX란? 리액트로 HTML을 개발하는 방법, 매우 간단하며 쉽다.) 상태를 관리하는 컴포넌트들을 캡슐화해 빌드한 후 그 컴포넌트들을 복잡한 UI로 조합하여 구성이 가능한데, 컴포넌트 로직은 자바스크립트로 구성이 되어있어 애플리케이션을 통한 대량 데이터를 전송가능하게 하고 DOM의 외부상태를 쉽게 유지할 수도 있다.
■ 단방향 데이터플로우
데이터가 UI로 흐르는 구조이며, 데이터가 변했을때 UI가 업데이트 된다. 하지만 단방향이므로, UI쪽에서 데이터를 변화시키는 것은 불가능하다. 즉 데이터가 변하게 되면 UI는 변화된 새로운 데이터와 함께 업데이트 된다. 앵귤러(Angular)와 비교하면 앵귤러의 경우는 양방향 데이터플로우이며, 이와는 반대로 데이터를 관리하는 컴포넌트가 있고 데이터를 UI컴포넌트에 전달하는 단순한 데이터 흐름으로 이해해 쉽고 편리하게 구현 가능하다.
장점
■ Component를 사용해서 효율적으로 재사용이 가능하고 높고 유지보수가 용이
Component는 UI를 구성하는 개별적인 뷰 단위로 전체 앱은 각 Component들이 결합해서 만들어 지게 되는데 무엇보다 각 Component들은 앱의 다른 부분, 또는 다른 앱에서 쉽게 재사용이 가능하다. Redux의 창시자이며, 현재는 Facebook React Core팀의 일원인 Dan Abramov는 React의 목표가 성능보다는 유지가능한 앱을 만드는 것에 있다고 설명한다.
■ 생태계가 넓고, 다양한 라이브러리 사용 가능
개발을 하다보면 막히는 부분, 오류가 있는 부분이 많은데 Vue에 비해 사용자가 많고, 역시 Facebook에서 만들었다보니 확실히 커뮤니티나 자료가 굉장히 방대하다.
■ 리액트는 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 혼용 가능
React는 다른 프레임워크나 라이브러리와 쉽게 함께 사용할 수 있고 이미 개발된 서비스에서도 일정 부분에서만 선택적으로 적용이 가능하여 단계적으로 React로의 변경이 가능하다.
■ virtual DOM을 활용하여 빠른 렌더링이 가능
DOM은 브라우저가 화면을 그리기위한 정보를 담고있는 문서 객체이다. JQuery처럼 실제 DOM을 변경할 경우, 변경할 부분이 일부분이더라도 DOM 전체를 다시 렌더링해야하고, 이는 성능 저하로 직결된다는 단점이 있다.
React는 렌더링 시 Virtual DOM, 즉 가상 DOM을 먼저 만든다. 그 후 실제 DOM과 비교를 하여 변경이 있는 부분(하위 컴포넌트)만 대체를 하기 때문에 리소스 낭비를 줄일 수 있다.
■ 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
React 내에서의 데이터의 흐름은 부모(Parent)에서 자식(Child)으로 단방향적이다. 그렇기 때문에 디버깅이 용이하며, 다른 라이브러리에 비해 안전성이 높다.
■ 리액트 네이티브를 활용하여 앱 개발 가능
리액트 네이티브는 네이트브 모바일 앱을 만들기 위한 프레임워크로서 리액트를 기반으로 개발되었다. 리액트 라이브러리가 웹 개발자나 하이브리드 앱 개발자에게 유용하고 관심을 끌게 하는 기술이라면, 리액트 네이티브는 모바일 개발자들이 몹시 주목할 기술이다.
※ 리액트 네이티브 : 대다수의 모바일 앱은 하이브리드가 아닌 네이티브 앱 형식으로 개발이 되는데 여기서 일반적으로 안드로이드와 iOS에서 동시 작동하는 소스코드를 작성하기 위해서는 '웹뷰'를 이용해야만 했다. 그러나 웹뷰를 이용한 하이브리드 앱 기술은 기존의 네이티브 앱에서 지원하는 속성을 이해하지 못했는데 리액트 네이티브 활용으로 네이티브 속성을 그대로 이용하는 것이 가능해졌다.
단점
■ 프레임워크의 MVC 와 비교하였을때 V(View)만을 관리한다.
View 부분만을 관리하기 때문에 다른 부분은 써드파티 라이브러리(Third party library, 패키지)를 이용하거나 직접 구현해야한다.
■ 진입장벽이 낮지많은 않다.
순수 JavaScript의 개념을 잘 알고 있을 필요가 있고 React는 inline-template 과 JSX 를 사용하는데, 처음에는 적응이 어려울 수도 있다.
■ MVC 패턴과 비교하였을때 V(View)만을 관리한다.
IE8 이하 버전은 지원을 하지 않기때문에 필요하다면 React 14 이하의 버전을 사용하고 이것을 호환해주는 폴리필을 사용해야한다.
Angular, React, Vue 의 비교
Angular, React, Vue 간단비교
■ React
- 웹 뿐만 아니라 앱 개발에도 사용 ( React Native )
- 페이스북이라는 거대한 업체의 지원
- 가장 거대한 커뮤니티
- Virtual Dom
■ Vue
- 가장 적은 러닝커브
- 가볍고 빠르게 개발이 필요하다면 추천
- Evan You 라는 개인이 프로젝트 리더
- 상대적으로 작지만 빠르게 성장중인 커뮤니티
- 가장 최신에 릴리즈 시작한 프레임워크(2014년)
- 양방향 바인딩
- Virtual Dom
■ Angular
- 구글이라는 전세계적인 기업의 지원
- 가장 빠르게 릴리즈된 JS 프레임워크(2010년)
- 큰 커뮤니티
- 양방향 바인딩
- TypeScript 가장 먼저 도입
- 가장 체계적이고 잘 정리되어있는 문서
- 가장 복잡하고 큰 러닝커브
Angular, React, Vue 중 선택애야 하는 경우
■ 앵귤러를 선택해야 하는 경우
-기능이 풍부하고 규모가 큰 애플리케이션을 개발할 때
-믿을 수 있고 확장 가능한 프레임워크가 필요할 때
-채팅 앱이나 메시징 앱과 같은 실시간 애플리케이션을 개발할 때
-장기프로젝트이며, 투자규모도 상당한 네이티브 앱이나 하이브리드 앱, 또는 웹앱을 개발할 때
-타입스크립트(TypeScript)로 코딩해야 할 때
-객체지향(Object-oriented)프로그래밍을 해야 할 때
■ 리액트를 선택해야 하는 경우
-빠른 일정 안에 엔터프라이즈 수준의 가벼우면서도 현대적인 애플리케이션을 개발해야 할 때
-웹사이트 개발 솔루션을 안전하게 보호할 수 있는 유연한 프레임워크가 필요할 때
-크로스 플랫폼(cross-platform) 애플리케이션이나 싱글 페이지 애플리케이션(SPA)을 개발할 때
-기존의 앱에서 기능성을 확장할 때
-강력한 커뮤니티 지원과 솔루션이 필요할 때
■ 뷰를 선택해야 하는 경우
-시장 진입 단계에서 필요한 프레임워크를 선택할 때
-작고 가벼운 애플리케이션을 개발할 때
-기존의 프로젝트에서 현대적이지만 제한된 리소스를 가진 프레임워크로 마이그레이션을 해야할 때
-기업이 아니라 사용자 커뮤니티의 지원을 받는 프레임워크를 원할 때
Angular, React, Vue 의 선호도 비교
2020년 기준 구글, 스택오버플로우, 깃허브 트렌드, npm 다운로드 모두 리액트가 높은것으로 나타며 각각 현재 시장에서 어떤 위치를 차지하고 있는지 확인해보기로 한다.
■ 구글 트렌드(국내/해외포함)
■ 스택오버플로우 / 깃허브 트렌드
■ npm 다운로드
내가 리액트를 선택한 이유
작성중 ..