React JS가 Angular 또는 Vue JS보다 나은 이유는 무엇입니까?

웹 페이지가 기본적으로 HTML, CSS 및 JavaScript 프로그래밍 언어(웹의 세 가지 기본 빌딩 블록)로 구축된다는 것은 일반적인 지식입니다. 특히 HTML은 메뉴, 텍스트 및 상자와 같은 웹 페이지의 요소를 만듭니다. CSS는 웹 페이지에 이러한 요소의 스타일을 지정하고, 디자인하고, 배치하는 데 사용됩니다. 마지막으로 이러한 요소와의 상호 작용 및 조작을 용이하게 하는 JavaScript입니다. 토론 주제는 JavaScript를 중심으로 진행됩니다. 특히 React.Js와 Angular 및 Vue.Js에 대한 우월성.

요약하면 React JS는 뛰어난 Virtual DOM 기능, 강력한 커뮤니티 지원, 풍부한 문서, 가벼운 속성, 관리 가능한 학습 곡선 및 React Native의 모바일 기능을 허용하는 유연성으로 인해 Angular 또는 Vue JS보다 낫습니다.

JavaScript: 접착제 언어

React의 우위를 정당화하는 사례에 대한 우선 순위를 설정하기 위해 몇 가지 기본 사항을 요약하겠습니다. JavaScript는 종종 다른 구성 요소의 어셈블리에 사용되는 글루 언어로 식별되었습니다. 세 가지 웹 빌딩 블록 중에서 HTML과 CSS는 덜 복잡합니다(주로 정적 디자인 목적으로 사용되지만). 그러나 동적 웹 콘텐츠를 만드는 개발자에게는 JavaScript가 우선 순위이며, 이는 JavaScript가 동시대보다 훨씬 크고 복잡한 이유를 나타냅니다. 기본적으로 대부분의 웹 페이지에서 사용되는 사실상의 표준이 됩니다.

결과적으로 지난 10년 동안 웹사이트의 개발 및 유지 관리를 용이하게 하기 위해 JavaScript를 기반으로 여러 프런트 엔드 프레임워크가 설계되었습니다. 결과적으로 2020년 현재 이러한 프론트엔드 JavaScript 프레임워크 중 가장 인기 있는 것은 React와 Vue, 그 다음은 Angular였습니다.

자바스크립트와 자바스크립트 기반 프레임워크와 라이브러리가 웹 개발을 위한 중요한 도구라는 것을 간략하게 설정했기 때문입니다. 따라서 블로그의 컨텍스트를 설정하기 위해 간단히 역추적하고 JavaScript의 역사와 개발에 대해 간략히 설명하겠습니다.

웹 기술 및 브라우저의 역사

최초의 웹 브라우저는 1990년 12월 팀 버너스 리(Tim Berners-Lee)가 수석 개발자로 일하면서 개발 및 출시되었습니다. 그는 웹 사이트의 인덱싱 및 탐색을 위한 World Wide Web용 애플리케이션 프로토콜인 HTTP(Hypertext Transfer Protocol)를 동시에 개발 및 출시했습니다.

그 후 1993년에 최초의 그래픽 웹 브라우저인 모자이크가 출시되었습니다. 마찬가지로 같은 해에 HTML이 개발되었습니다. 이것은 JavaScript가 생성되기 몇 년 전이고 CSS는 JavaScript가 생성된 지 1년 후인 1996년에 출시되었습니다. 이 세 가지 언어는 나중에 "웹 개발자가 배워야 하는 3가지 기술"이라는 기술 스택을 형성한 것으로 유명합니다.

자바스크립트의 개발

Mosaic 브라우저의 유명한 후속 제품 중 하나는 1994년에 출시된 Netscape Navigator 브라우저였습니다. 1995년 당시 인기 있던 Netscape의 개발자는 프로그래머인 Brendan Elch를 고용하여 웹 페이지를 위한 새로운 동적 스크립팅 언어를 만들었습니다. 및 클라이언트 측 데이터 조작.

Netscape는 시장에 대응하여 HTML에 국한되지 않고 동적인 웹사이트를 만들어야 할 필요성을 느꼈습니다. 불행히도 대부분의 초기 웹 사이트는 HTML만 사용했기 때문에 계산적으로 비효율적이었습니다. 따라서 Netscape는 DOM(문서 객체 모델) 조작을 대상으로 하는 간단한 웹 스크립팅 언어를 고안해야 했습니다. 결과적으로 이 프로젝트는 Java 의 기능과 구문에서 영감을 받았습니다. 사소한 구문 유사에도 불구하고 근본적으로 다릅니다.

1996년 3월에 공식적으로 출시된 JavaScript는 HTML만으로는 불가능한 웹 페이지의 새로운 기능을 결국 가능하게 했습니다. 예를 들어 사용자 입력에 응답하고 팝업 창을 표시하고 요소의 색상을 변경합니다. Netscape는 나중에 Mozilla도 소유한 America Online(AOL)에 인수되어 인터넷 표준으로서 JavaScript가 기하급수적으로 성장하는 데 기여했습니다.

XML, AJAX 및 단일 페이지 응용 프로그램의 출현

2000년대 후반, 웹 사용자들은 느린 서버 응답과 긴 데이터 전송 시간에 불만을 느꼈습니다. 이러한 현상은 시대를 표시한 저속 인터넷 연결로 인해 더욱 악화되었습니다. AJAX 기술 스택(Asynchronous XML 및 JavaScript) 개발로 이어짐

이와 관련하여 XML은 콘텐츠 표시 대신 데이터 표현에 사용되지만 HTML과 유사한 마크업 언어입니다. XML은 AJAX 스택 생성과 함께 JavaScript 내에서 관련성이 있게 되었습니다.

AJAX는 종종 여러 기술의 모음으로 설명되며 전체적으로 번들로 제공됩니다. AJAX는 XHTML, CSS, DOM, XML, XLST, XML HttpRequest 및 JavaScript로 구성됩니다. 그리고 AJAX 내에서 JavaScript는 다른 모든 도구를 함께 바인딩합니다 . 결과적으로 AJAX는 전체 콘텐츠를 다운로드하지 않고 HTML 페이지의 일부를 업데이트하는 방법을 제공했습니다.

단일 페이지 애플리케이션

일반적으로 모든 JavaScript 프레임워크는 단일 페이지 애플리케이션 원칙을 채택합니다. 실제로 SPA(단일 페이지 응용 프로그램)는 개별 구성 요소로 구성된 응용 프로그램으로, 첫 페이지 방문 시 메모리에 로드된 다음 독립적으로 교체하거나 업데이트할 수 있으므로 전체 웹 페이지를 다시 로드할 필요가 없습니다. 모든 사용자 행동에.

또한 SPA를 사용하면 구성 요소를 재사용할 수 있으므로 필요한 코드 양이 크게 줄어듭니다. 첫 번째 단일 페이지 애플리케이션은 2002년에 구현되었으며 구현 대상 언어 중 하나로 JavaScript를 사용했습니다. 단일 페이지 애플리케이션의 성공은 주로 선행 AJAX 기술과 서버 통신에서의 우선 순위 덕분이었습니다.

JavaScript-HTML 관계

HTML은 jQuery와 마찬가지로 JavaScript를 보완하는 역할을 할 수 있습니다. 또는 HTML 요소로 컴파일되는 통합된 HTML과 유사한 구문입니다. React로 개발할 때 권장되는 JSX 구문이 이에 대한 예입니다. 순수한 JavaScript나 HTML이 아니라 둘 다의 융합입니다. 따라서 기본적으로 HTML의 기본 요소 생성 및 구조적 기능을 JavaScript의 동적 기능과 통합합니다.

CSS-HTML 관계

CSS는 일반적으로 JavaScript와 함께 사용됩니다. 전통적인 예제 형식은 CSS 속성을 별도의 .css 파일에 구현하는 것입니다. 다른 형식은 CSS-in-JS 및 styled-components와 같은 특수 라이브러리를 통해 CSS를 JavaScript 프레임워크 자체에 통합하는 것입니다. 이러한 라이브러리를 통해 개발자는 CSS와 유사한 구문으로 시각적 요소의 스타일을 지정하는 JavaScript 코드를 작성할 수 있으며 일반적으로 브라우저에서 순수 CSS로 컴파일됩니다.

JavaScript의 서버 측 구현의 출현

결국 2009년에는 JavaScript의 서버 측 구현인 Node.js가 출시되었습니다. Node.js는 JavaScript 도메인을 백엔드로 확장하여 JavaScript가 풀 스택 언어가 되도록 했습니다.

Node.js는 현재 웹 브라우저 환경 외부에서 JavaScript 코드를 실행하는 데 사용되는 가장 많이 사용되는 JavaScript 런타임 환경입니다. 서버 측 기능에 활용되는 Node.js의 작성자는 당시 인기 있었던 Apache HTTP Server(종종 PHP와 함께 사용)에 대한 보다 효율적인 대안을 개발하는 것을 목표로 했습니다. Node.js는 자체적으로 C++를 사용하여 구축된 Google의 V8 JavaScript 엔진을 사용하여 생성되었습니다.

프론트엔드 자바스크립트 프레임워크

기초를 마련했으므로 이제 벽돌을 쌓고 React.js 성향의 이유를 탐구할 수 있습니다.

프레임워크 대 라이브러리

공통된 주장은 이 JavaScript 트리오에 대해 이야기할 때 라이브러리에 해당하는 것입니다. 아이러니하게도 React는 때때로 라이브러리라고 부르고 어떤 때는 프레임워크라고 합니다. 그러나 명확성과 일관성을 위해 라이브러리에서 프레임워크를 분리하는 것이 종종 유용합니다.

특히 라이브러리는 개발자가 리소스 사용 방법을 제어할 수 있는 비휘발성 리소스의 수동 모음입니다. 그들은 일반적으로 매우 간단하고 하나의 특정 작업만 수행하므로 도구로 분류할 수 있습니다.

프레임워크는 덜 수동적이며 개발자가 개발 목적으로 골격을 사용하고 제어 흐름을 적용하여 특정 방식으로 작업을 수행하도록 설계되었습니다. 예를 들어, 개발자는 전체 웹 애플리케이션을 개발하고 설정하는 정의된 방법을 제공받습니다. 웹 애플리케이션 라이브러리는 그렇지 않지만 대신 네트워크 요청이나 스타일 지정 작업과 같은 더 간단한 하위 도메인 작업을 제공합니다.

Vue와 Angular는 기술적으로 프레임워크로 간주되지만 React가 프레임워크인지 라이브러리인지에 대해서는 여전히 약간의 불일치가 있습니다. React의 원래 개발자는 이를 라이브러리라고 부르지만 여전히 프레임워크로 더 많이 사용됩니다.

React가 지배적인 대안인 이유!

돌이켜보면 React는 XHP(Facebook에서 만든 PHP 라이브러리)의 JavaScript 포트로 개발되었습니다. 일반적으로 XHP는 사용자 지정 구성 요소 생성을 허용하고 악의적인 사용자 공격을 방지하기 위한 PHP 수정이었습니다. 나중에 이 JavaScript 포팅 프로젝트에서 React의 공통 표준 언어가 된 JSX(JavaScript XML)가 성장했습니다.

모든 것을 고려할 때 React는 동료보다 범위가 좁고 애플리케이션 사용자 인터페이스만 렌더링합니다. 그러나 경량 구조의 이점을 유지하므로 배우고 사용하는 데 비용이 적게 듭니다. 즉, Vue 및 Angular와 동일한 목적으로 사용되기 때문에 여전히 프레임워크로 간주될 수 있습니다.

우수한 가상 DOM 기능.

React는 DOM에 따라 기능을 최적화한 최초의 프레임워크였습니다. DOM 조작은 사용되는 컴퓨팅 리소스 측면에서 비용이 많이 들기 때문에 이는 성공에 기여한 요소였습니다. 특히 React는 직관적인 상태 관리와 이 조작을 제어하는 ​​가상 DOM을 사용하여 가능한 한 적은 DOM 조작을 수행하도록 설계되었습니다.

가상 DOM을 이렇게 활용하면 메모리를 더 많이 사용하는 대신 React 업데이트가 더 빨라집니다. 그리고 브라우저 DOM에 대한 빠른 업데이트를 실행하기 위해 react는 추가 메모리를 소모하는 가상 DOM 트리의 복사본을 메모리에 유지합니다. 결과적으로 React의 인기는 모바일 개발을 위한 React Native와 같은 수많은 파생 라이브러리를 탄생시켰습니다.

단방향 데이터 흐름

React에서 데이터는 아래쪽으로 흐르도록 되어 있으며 단방향 데이터 흐름이라고 합니다. Angular와 Vue의 양방향 데이터 바인딩은 코드를 더 예쁘고 단순하게 만드는 반면 React는 우수한 관리성과 성능을 보완합니다. 우리 주장의 주목할만한 이점.

React가 Angular보다 나은 이유

더 많은 맥락을 위해 사례별로 비교를 해 볼까요? 대규모 애플리케이션 개발을 위한 Angular는 프로그래밍 기능 및 파일 크기 측면에서 보다 완전한 기능을 갖춘 JavaScript 프레임워크입니다.

그러나 Angular는 React와 비교하여 부정적인 부풀림, 복잡성 및 무거운 스타일의 개발 특성이 있습니다. 소규모 개발 프로젝트에 권장되며 학습 곡선이 가파르다고 인용됩니다. 상황을 악화시키기 위해 AngularJS는 더 이상 활발히 개발되지 않습니다.

Angular는 전적으로 TypeScript로 구축되었으며 많은 코드가 필요하므로 약간 복잡합니다. 반대로 React는 매우 "단순"하며 원래 방향은 보기를 제어하고 조작하는 데 중점을 둡니다. 기본적으로 개발자는 필요한 것을 정확하게 선택할 수 있지만 많은 수의 타사 패키지를 사용할 수도 있습니다. 따라서 결과적으로 React는 Angular에 비해 많은 오버헤드를 포함하지 않습니다.

React가 Vue보다 나은 이유

Vue.js는 Google 직원 Evan You가 만들었습니다. Evan은 AngularJS에서 영감을 얻었지만 더 간소화되고 개선된 버전을 만들고 싶었습니다. 가벼운 속성, 뛰어난 성능 및 멋진 프로그래밍 스타일에도 불구하고 Vue의 부정적인 측면은 서투름입니다. 여기서 React의 우수성이 과시됩니다.

예를 들어 Vue.js에는 React와 달리 명확한 모범 사례가 없기 때문에 주요 애플리케이션을 유지 관리하기 어려울 수 있습니다. 그러나 React에 대한 모범 사례는 커뮤니티에서 찾을 수 있습니다. 예를 들어 실행 가능한 워크플로를 만드는 것은 공식 create-react-app 패키지를 통해 활성화됩니다. 위의 점들로 인해 React는 많은 복잡한 코드를 작성하고 유지하는 기능을 적절하게 제공합니다.

ES6 구문

또한 개발자는 Vue와 함께 ES6 구문을 활용할 수 있지만 이 점에서 React는 Vue보다 최적으로 설계되었습니다. Vue는 현재 TypeScript 지원을 제공하지만 단일 명령에서 TS 지원과 함께 CRA(Create React App)를 사용하는 React처럼 지원이 잘 이루어지지 않습니다. 또한 Vue를 사용하면 진정한 완전한 TypeScript 응용 프로그램을 만들기 위해 사용자 지정 데코레이터 및 기능이 포함된 일부 타사 패키지가 여전히 필요합니다. 불행히도 공식 문서는 시작하는 데 필요한 모든 정보를 제공하지 않습니다. 또 다른 React 장점!

우리의 주장을 확고히 하는 동안 더 명확한 특정 벤치마크를 사용하여 논의를 더 세분화해 보겠습니다.

1. 프레임워크 크기

npm 레지스트리에 있는 프레임워크의 축소된 패키지 크기는 개발자가 프레임워크를 선택하지 못하도록 하거나 권장하지 않을 수 있지만 여전히 우리의 주장에 도움이 될 수 있습니다. Angular는 나머지(187.6kB)보다 현저하게 약간 큰 반면 React는 6.4kB이고 Vue는 63.5kB로 그 사이에 있습니다.

일반적으로 패키지 크기 비교는 Angular가 더 많은 기능을 지원하고 포함하는 반면 React는 보다 간소화된 개발을 위해 설계되었음을 보여줍니다. 따라서 React의 특성은 개발자에게 효율성을 개선할 수 있는 선택권을 더 적게 제공하므로 소규모 프로젝트에 유용합니다.

또한 Angular의 복잡한 구조는 특히 메모리 할당에서 React 또는 Vue에 비해 성능이 저하될 가능성이 있습니다.

2. 개발 경험, 학습 곡선 및 가용성

일반적으로 TypeScript는 그 자체로 JavaScript보다 배우기가 훨씬 어렵거나 쉽지 않습니다. 그러나 널리 사용되지 않으며 JavaScript보다 적은 수의 라이브러리와 전체 문서를 포함합니다. 이러한 요소는 구문의 차이와 JavaScript의 약간 다른 변형에서 코딩에 익숙해지는 데 걸리는 시간과 함께 Angular보다 React에 약간의 이점을 제공합니다.

3. 언어 기반 상황

또 다른 요점은 React와 Vue가 JavaScript ES6을 기반 언어로 사용한다는 것입니다. ES6은 2015년 최신 JavaScript 업계 표준입니다. 반면 Angular 1은 이전 버전인 JavaScript ES5를 활용하고 Angular 2는 TypeScript를 기반으로 합니다.

TypeScript를 사용하면 개발자가 기존 JavaScript 프로그래밍 형식을 제거할 수 있지만 사용자 커뮤니티가 제한적입니다. 이는 JavaScript의 또 다른 새로운 구문 엄격한 상위 집합이 나타날 경우 TypeScript가 사라질 수 있는 잠재적 위험이 있음을 의미합니다. 반대로 JavaScript ES6은 JavaScript로 개발할 때 현재 업계 기준이기 때문에 곧 사라지지 않을 것입니다.

4. 문서

솔직히 말해서 문서의 가용성은 이러한 모든 프레임워크에 대해 만족스럽습니다. 즉, React 문서가 가장 많은 언어(16개)로 제공된다는 점은 여전히 ​​주목할 만합니다. Vue는 8개 언어로 된 문서로 뒤쳐져 있지만 Angular 문서는 4개 언어로 제공됩니다. React 문서는 일관성이 있으며 다양한 개발자를 위한 통합 이론을 제공합니다.

불행히도 Angular의 프레임워크 상황은 AngularJS와 Angular 2로 나누어져 있다는 점에서 개발자에게 약간의 어려움을 줄 수 있습니다. 또한 "Angular"라는 용어는 때때로 온라인 컨텍스트에서 어떤 프레임워크를 참조하는지 모호하게 들릴 수 있습니다. 특히 소규모 사이트와 짧은 답변을 탐색할 때.

5. 커뮤니티 지원

대부분의 경우 React는 현재 모든 JavaScript 프레임워크 중에서 가장 큰 커뮤니티 지원을 보유하고 있습니다. 이것은 토론 포럼과 대화방의 폭에 의해 예시됩니다. 또한 사용자는 최신 뉴스를 팔로우하고 Facebook 및 Twitter에서 토론에 참여할 수 있습니다.

Svelte 프레임워크(우수상)

우리는 JavaScript 영역에 비교적 새로운 항목을 언급하는 것이 현명하다고 생각했습니다. Rich Harris가 개발하고 2016년에 처음 출시된 Svelte는 2019년 내내 엄청난 인기를 얻었습니다. Svelte는 로컬 상태 처리 변경과 같은 JavaScript의 여러 개선 사항을 도입했습니다.

Svelte에는 가상 DOM이 없으며 작성된 코드를 런타임 대신 빌드 시 JavaScript로 변환한다는 점도 주목할 가치가 있습니다. 기본적으로 선언적 요소를 실제 DOM으로 변환하는 것을 우회합니다.

요약

Vue에는 Github 별점이 약간 더 있지만 React는 눈에 띄는 약점이 없고 성능이 더 우수하여 여전히 우수합니다. 본질적으로 더 나은 성능은 로딩 시간을 줄이고 사용자 만족도를 높이는 것을 의미합니다. 또한 상업용 웹 사이트의 경우 몇 밀리초의 로딩 시간 감소로 사용자 상호 작용 및 유지가 증가할 수 있으므로 수익이 증가합니다.

궁극적으로 JavaScript 프레임워크 환경의 미래는 예측하기 어렵습니다. 증거에서 알 수 있듯이 React는 가까운 미래에 지배적인 프레임워크로 남을 것 같습니다. 그러나 뛰어난 성능과 많은 문서를 갖춘 성숙하고 잘 지원되는 프레임워크를 활용하여 애플리케이션을 개발하려는 개발자에게 React는 탁월한 선택입니다!