Blazor 대 React 비교: 기술 살펴보기

React 사용하여 단일 페이지 응용 프로그램을 개발하려면 JavaScript를 사용해야 합니다. 그러나 가파른 학습 곡선을 처리하고 싶지 않은 경우 패키지를 앱으로 가져오는 외부 라이브러리에 의존하는 제한된 라이브러리, 반복적인 성능 문제 등을 Blazor로 전환합니다.

이 프레임 워크에 대한 좋은 점은 React와 비교할 때 다음과 같습니다.

• 최신 웹 표준을 활용합니다.
• Blazor 서버 측 배포 또는 WebAssembly가 있는 클라이언트 측을 위해 추가 기능이나 추가 플러그인이 필요하지 않습니다.
• 서버와 클라이언트 측은 모두 C#으로 작성되었습니다.
• 라이브러리와 코드를 보다 쉽게 공유할 수 있습니다.

기술을 더 잘 이해하기 위해 이 블로그 게시물은 Blazor와 React의 주요 차이점을 안내하여 팀의 전문 지식, 앱 복잡성, 성능 요구 사항 및 장기적인 유지 관리 가능성을 기반으로 정보에 입각한 선택을 할 수 있도록 도와줍니다.

빠른 Blazor와 React 비교

커뮤니티 피드백(예: Reddit)은 일반적으로 반영됩니다. NET 개발자들은 언어 컨텍스트 전환을 줄이고 인프라를 단순화하는 Blazor 환영합니다. 프론트엔드 전문가는 유연성, 생태계 깊이 및 성능 조정을 위해 React 선호합니다.

성능 현실 점검은 다음을 보여줍니다. 

• React 일반적으로 슬림한 페이로드와 지연 로딩 전략 덕분에 최초 로드에서 승리합니다.
• Blazor WASM은 부팅 속도가 느려질 수 있지만 AOT(Ahead-of-Time 컴파일) 및 최적화는 런타임 성능을 크게 향상시킵니다.
• Blazor Server는 거의 즉각적인 초기 로드를 제공하지만 지속적인 연결과 서버 측 상태 관리가 필요합니다.

하지만 알아야 할 사항은 다음과 같습니다.

	React	Blazor
Type	Front-End Library – 클라이언트 UI 및 웹 사이트의 상호 작용에 중점을 둡니다.	Full Framework – client side (WASM) and server side (ASP.NET)
Developer	페이스북	마이크로소프트
License	MIT	Apache
Language	JavaScript/JSX/TypeScript	씨#
Performance	뛰어난 성능으로 가벼운 무게.	WASM 클라이언트 쪽 앱은 최초 로드가 더 많습니다. 서버 측의 성능이 뛰어납니다.
학습 곡선	가파른 학습 곡선	배우기 쉬움
PWA 지원	예	Yes (Blazor WebAssembly)
라우팅	예	예
Http Client	포함되지 않음	예
종속성 주입	포함되지 않음	예
클라이언트당 활성 연결이 필요합니다.	No	예
각 클라이언트에 대한 구성 요소 상태를 서버측에 저장합니다.	No	Yes (Blazor Server)
구성 요소에 대한 범위가 지정된 스타일	예	예
Static Deployment	예	Yes (Blazor WebAssembly)
Server-Side Rendering	예	예
SEO / 크롤러에 최적화	예	예
번들 크기	12KB가 gzip으로 압축되었지만 전체 스택이 아닌 클라이언트 렌더링 프레임 워크 만 있습니다.	Blazor 서버의 경우 최소입니다. 클라이언트 쪽 WASM 앱의 .NET Framework의 경우 최소 393kb, 최대 780kb.
압형	CLI와 다양한 타사 옵션.	CLI, Visual Studio 및 타사 옵션.
생산 준비 완료	React는 Uber, Drop Box, Twitter, PayPal, Netflix, Walmart 등과 같은 회사에서 수년간 전투 테스트를 거친 배포를 통해 현재 생산 준비가 되어 있습니다.	예

Blazor 개요 – 현재 상태/기능

Blazor CSS 및 HTML과 같이 이미 존재하는 웹 기술을 기반으로 합니다. 그러나 이 프레임워크를 사용하면 JavaScript 대신 Razor 및 C# 구문을 사용하여 재사용 가능한 대화형 웹 사용자 인터페이스를 개발할 수도 있습니다.

• WebAssembly에서 구현된 클라이언트 기반 애플리케이션에 대해 이 작업을 수행할 수 있습니다.
• 그리고 ASP.NET 있는 서버 측 애플리케이션.

서버와 클라이언트가 모두 C#으로 작성되어 라이브러리와 코드를 공유할 수 있습니다. NET을 사용할 때 현대적이고 활기차고 활기차고 활기차게 단일 페이지 응용 프로그램 플랫폼을 개발할 수 있는 플랫폼을 제공합니다.

React와 비교할 때 Blazor의 좋은 점은 최신 웹 표준을 활용한다는 것입니다. 또한 Blazor는 Blazor 서버 측 배포 또는 WebAssembly가 있는 클라이언트 측에 추가 기능이나 추가 플러그인이 필요하지 않습니다.

WebAssembly 란 무엇입니까?

WebAssembly는 일반적으로 줄여서 Wasm이라고 합니다. 최신 웹 브라우저에서 실행할 수 있는 웹 표준입니다. 웹 플랫폼에 언어 다양성을 제공합니다. JavaScript, HTML 및 CSS와 달리 Wasm은 JavaScript보다 빠르고 컴파일된 언어에 매우 가깝게 설계된 실행 가능한 프로그램용 바이너리 명령어 형식입니다. 여전히 통역되는 언어이지만 인간이 아닌 기계가 통역하도록 설계되었습니다. Wasm은 기본적으로 최신 브라우저를 실행합니다.

Versions of Blazor

개발자는 Blazor 앱을 개발할 때 서버의 ASP.NET 컨텍스트에서 실행되는 Blazor Server와 클라이언트 측 WebAssembly 실행 모델인 Blazor Client의 두 가지 옵션이 있습니다.

• Blazor 서버–ASP.NET Core Server는 Blazor에서 개발된 앱의 호스트입니다. 이 호스팅은 ASP.NET Razor 형식으로 수행됩니다. 원격 영역의 클라이언트가 씬 클라이언트로 작동하기 때문에 서버는 많은 처리 부하를 감당합니다. 클라이언트의 웹 브라우저는 작은 페이지를 다운로드하고 사용자 인터페이스를 업데이트합니다. 이 작업은 단일 연결을 통해 발생합니다. 이 서버는 .NET Core 3의 일부로 릴리스되었습니다.

• Blazor WebAssembly– 이 모드에서는 단일 페이지 앱이 실행되기 전에 클라이언트의 웹 브라우저에 다운로드됩니다. 여기서 다운로드 크기는 Blazor 서버에 비해 더 큽니다. 단, 앱에 따라 차이가 있을 수 있습니다. 또한 처리는 전적으로 클라이언트 하드웨어에서 수행됩니다. 빠른 응답 시간은 이 앱 유형의 유익한 측면입니다. 이름에서 알 수 있듯이 클라이언트 측 프레임워크는 JavaScript가 아닌 WebAssembly로 작성되었습니다. 함께 사용할 수도 있습니다.

​Blazor WebAssembly에 대해 자세히 알아보고 많은 화제를 모으고 있는 이유에 대해 알아보세요.

주요 특징들

Blazor는 비교적 새롭기 때문에 Microsoft 웹 생태계의 개발 상황을 따르지 않는다면 아직 Blazor 대해 들어본 적이 없을 가능성이 있습니다.  그러나 Blazor에 대한 몇 가지 일반적인 오해가 있으므로 Blazor 테이블에 무엇을 가져다주는지 살펴보겠습니다.

CSS 및 HTML

사람들이 Blazor에 접근할 때 자주 묻는 질문 중 하나는 CSS에 관한 것입니다. Blazor에서 구성 요소를 만들기 위해 Razor 템플릿을 사용하는 경우 결과는 브라우저에서 HTML로 렌더링됩니다. Blazor에 의해 생성된 CSS 및 HTML은 다른 CSS 또는 HTML과 브라우저와 다르지 않습니다. 즉, Sass, CSS 사용자 정의 속성 및 반응형 디자인과 같은 전처리기를 포함하는 모든 CSS 기능을 Blazor 사용할 수 있습니다.

CSS Isolation

CSS 격리는 Blazor의 일부입니다. 이 기능은 라이브러리 간의 스타일 충돌을 방지하고 Blazor Data Grid 등과 같은 구성 요소를 Blazor 데 도움이 됩니다. 이 기능은 빌드 시 생성됩니다. 이 시간 동안 Blazor HTML 속성과 함께 사용되는 CSS 선택기에 대한 식별자에 연결됩니다.

양식 구성 요소

Blazor 에는 내장 입력 및 양식 구성 요소와 같은 HTML 생성을 지원하는 추가 기능이 있습니다. 유효성 검사를 사용하여 폼을 작성하는 일반적인 작업은 이러한 선택적 구성 요소에 의해 추상화됩니다. 결국 구성 요소는 표준 HTML을 렌더링합니다. 그들은 aria-, id 및 class와 같은 표준 HTML 속성을 완전히 사용할 수 있습니다.

많은 현대 소프트웨어 엔지니어는 Blazor를 프론트엔드 프레임워크의 차세대 혁신의 구체화로 보고 있으며, 특히 JavaScript 대신 WebAssembly를 대상으로 할 때 더욱 그렇습니다. Blazor, Microsoft는 개발자가 Blazor에서 WebAssembly로 응용 프로그램을 구축하는 것을 매우 간단하게 만들어 WebAssembly에 대한 소문을 배가시키고 있습니다.

React JS와 어떻게 비교 Blazor? 한 번 살펴 보겠습니다.

React 개요 – 현재 상태/기능:

React는 정교한 UI를 구축하도록 설계된 유연하고 효율적이며 선언적인 JavaScript 라이브러리입니다. 물론 React와 Blazor를 비교할 때 둘 다 대화형의 풍부한 최신 클라이언트 측 응용 프로그램을위한 클라이언트 측 라이브러리 / 프레임 워크라는 동일한 기능을 공유합니다.

그러나 차별화되는 점은 다음과 같습니다.

UI 개발을 위해 구축 

• 개발자가 데이터 그리드, 차트 등을 포함한 재사용 가능한 UI 구성 요소를 보다 효율적인 방식으로 구축할 수 있습니다.
• 최신 클라이언트 측 웹 애플리케이션을 제작하는 데 이상적입니다.

언어 및 플랫폼에 구애받지 않음

• 주로 TypeScript/JavaScript를 사용합니다.
• 다른 배경을 가진 개발자도 쉽게 선택할 수 있습니다.
• React Native를 사용하면 공유 코드로 iOS, Android 및 웹 앱을 빌드하는 등 크로스 플랫폼 개발이 가능합니다.

단순성과 재사용성을 위해 제작 

• Angular와 같은 이전 프레임워크에서 지루했던 코딩 작업을 단순화하기 위해 Facebook에서 개발했습니다.
• 구성 요소 기반 아키텍처를 촉진하여 개발자가 복잡한 UI를 분해하고 코드를 효율적으로 재사용할 수 있도록 합니다.

개발자 생산성을 위한 JSX/TSX 

• JavaScript 내에서 HTML과 유사한 코드를 작성할 수 있는 구문 확장인 JSX(JavaScript XML)를 사용합니다.
• 기계가 읽을 수 있고 검증 가능한 코드 구조를 쉽게 생성하여 성능과 유지 관리성을 모두 향상시킵니다.

페이스북이 React 개발했을 때, Angular와 같은 다른 기술들은 이미 존재하고 있었다. 당시 대부분의 개발자는 많은 코딩을 해야 했습니다. 다른 프레임워크를 사용하는 개발자는 대부분의 코드를 재작업해야 하는 문제에 직면해 있습니다. 그들은 복잡한 구성 요소를 분해할 수 있는 프레임워크를 찾았습니다. 그들은 코드를 재사용하여 프로젝트를 더 빠른 속도로 완료하기를 원했습니다. React 그들을 위해 이것을 가능하게 했습니다.

React 주요 기능

Blazor 대 React 성능도 중요하지만 React의 주요 기능을 검토해 보겠습니다.

JSX

JSX 또는 JavaScript XML을 사용하면 개발자가 createElement() 및/또는 appendChild() 메서드 없이 React로 HTML을 작성하고 해당 HTML 요소를 DOM에 배치할 수 있습니다. JSX는 컴파일될 때 HTML 태그를 React 요소로 변환합니다. 필수는 아니지만 JSX를 사용하면 React 애플리케이션을 더 쉽게 작성할 수 있습니다.

Virtual DOM

React는 가상 DOM을 사용합니다. 결과적으로 개발자는 Blazor과 React 성능 비교를 수행할 때 성능이 더 빠른 앱을 만들 수 있습니다. React 개발할 때 제작자는 오래된 HTML을 업데이트하는 것이 비용과 시간이 많이 소요되는 과정이 될 것이라고 올바르게 예측했습니다. 이러한 이해를 바탕으로 그들은 Virtual DOM이라는 아이디어를 만들었습니다. 이 기능을 통해 플랫폼은 정확히 무엇을 다시 렌더링해야 하는지 또는 DOM의 특정 부분을 고려하지 말아야 할 때를 알 수 있습니다. 그 이유는 플랫폼이 데이터가 변경된 시점을 식별할 수 있기 때문입니다. 최상의 사용자 환경을 제공하려면 신속하게 대응하는 사용자 인터페이스가 매우 중요합니다.

Blazor와 React 비교

개발자와 이야기할 때 React 또는 Blazor 결정할 때 개발 기술에서 어떤 것이 편안한지에 따라 다릅니다.

• .NET/Visual Studio 개발자인 경우 .NET 및 Blazor와 같은 전체 스택 프레임워크를 선택하는 것이 논리적입니다.
• 노련한 JavaScript 개발자라면 UI 라이브러리인 React를 선택한 다음 다른 라이브러리를 선택하여 자신만의 'React Stack'을 만들 수 있습니다.

Blazor와 React는 모두 오픈 소스 도구이며 둘 다 앱 개발자들 사이에서 엄청난 인기를 얻고 있습니다.

그렇다면 Blazor React 보다 나은가요? 두 가지를 비교할 때 대부분의 일대일 테스트는 React WASM으로 Blazor 비교하는 경우 앱이 애플리케이션 DLL 라이브러리와 함께 전체 .NET 런타임을 브라우저에 다운로드하기 때문에 Blazor 보다 빠르게 로드되고 렌더링되는 것을 보여줍니다. 이것은 Blazor React의 성능을 따라갈 수 없다는 인식(및 적어도 첫 번째 렌더링의 현실)을 제공합니다.

그러나 Blazor 느리다는 의미는 아니지만 앱 개발자가 React에서 경험하는 다운로드 및 렌더링 시간은 더 좋아질 것입니다. 앱의 전체 React 스택을 고려하면 React 앱의 최초 로드 속도가 느려질 수 있습니다. 모든 앱은 다르고 모든 경험은 다를 것입니다. Blazor 서버 앱은 React 성능을 초과할 수 있습니다.

WebAssembly Blazor React를 비교할 때 둘 다 인상적인 기능 세트를 갖춘 좋은 프레임워크입니다. 대부분의 웹 개발자는 이러한 프레임워크를 모두 지원하고 둘 다의 성능에 만족합니다. 따라서 Blazor과 React 비교를 수행할 때는 항상 자체 테스트를 수행하고 앱 환경에 가장 적합한 것을 결정해야 합니다.

Should You Choose Blazor or React?

Blazor과 React 모두 다음 프로젝트를 위한 훌륭한 옵션입니다. 몇 가지 고려 사항이 있습니다.

• Blazor와 같은 새로운 프레임 워크로 도로의 일부 충돌을 처리 할 의향이 있습니까?
• 성숙한 UI 라이브러리의 이점을 얻기 위해 다이빙을 하고 React 배우시겠습니까?
• Microsoft .NET 에코시스템에서 최신 웹 앱을 더 쉽게 사용할 수 있는 C# 개발자인가요?
• React 앱 개발을 지원하기 위해 자체 라이브러리 스택을 선택하고 싶은 노련한 JavaScript 개발자입니까?

어떤 것을 선택하든 장단점이 있지만 어느 것을 선택하든 아름답고 빠르며 반응이 빠른 웹 경험을 구축할 수 있다고 믿습니다.

Infragistics 에서는 두 프레임워크를 모두 지원합니다. Ignite UI for React 및 Ignite UI for Blazor 페이지를 방문하여 각각에 대한 세부 정보를 알아보세요.

Read more: Blazor vs Angular Comparison.