ASP.NET Web Forms의 아키텍처 비교 및 Blazor

팁 (조언)

이 콘텐츠는 Blazor 또는 오프라인으로 읽을 수 있는 다운로드 가능한 무료 PDF로 제공되는 for ASP NET Web Forms Developers for Azure eBook에서 발췌한 것입니다.

PDF 다운로드

ASP.NET Web Forms와 Blazor은 비슷한 개념을 많이 가지고 있지만, 작동 방식에는 차이가 있습니다. 이 장에서는 ASP.NET Web Forms Blazor및 의 내부 작동 및 아키텍처를 살펴봅니다.

ASP.NET 웹 양식

ASP.NET Web Forms 프레임워크는 페이지 중심 아키텍처를 기반으로 합니다. 앱의 위치에 대한 각 HTTP 요청은 ASP.NET 응답하는 별도의 페이지입니다. 페이지가 요청되면 브라우저의 내용이 요청된 페이지의 결과로 바뀝니다.

페이지는 다음 구성 요소로 구성됩니다.

• HTML 마크업 언어
• C# 또는 Visual Basic 코드
• 코드-비하인드 클래스는 논리 및 이벤트 처리 기능을 포함합니다.
• 제어

컨트롤은 페이지에서 프로그래밍 방식으로 배치하고 상호 작용할 수 있는 재사용 가능한 웹 UI 단위입니다. 페이지는 태그, 컨트롤 및 일부 코드를 포함하는 .aspx 끝나는 파일로 구성됩니다. 코드 숨김 클래스는 사용되는 프로그래밍 언어에 따라 기본 이름과 .aspx.cs 또는 .aspx.vb 확장명을 가진 파일에 있습니다. 흥미롭게도 웹 서버는 .aspx 파일의 내용을 해석하고 변경할 때마다 컴파일합니다. 이 다시 컴파일은 웹 서버가 이미 실행 중인 경우에도 발생합니다.

컨트롤은 태그를 사용하여 빌드하고 사용자 컨트롤로 배달할 수 있습니다. 사용자 컨트롤은 클래스에서 UserControl 파생되며 Page와 구조가 비슷합니다. 사용자 컨트롤에 대한 태그는 .ascx 파일에 저장됩니다. 함께 제공되는 코드 숨김 클래스는 .ascx.cs 또는 .ascx.vb 파일에 상주합니다. 코드로 컨트롤을 완전히 빌드할 수도 있습니다. WebControl 또는 CompositeControl 기본 클래스를 상속하여 가능합니다.

페이지에는 광범위한 이벤트 수명 주기도 있습니다. 각 페이지는 ASP.NET 런타임이 각 요청에 대한 페이지의 코드를 실행할 때 발생하는 초기화, 로드, 미리 렌더링 및 언로드 이벤트를 생성합니다.

페이지의 컨트롤은 일반적으로 컨트롤을 표시한 동일한 페이지로 데이터를 다시 전송하며, 이때 숨겨진 양식 필드의 ViewState라는 페이로드도 함께 전달합니다. 필드에는 ViewState 컨트롤이 렌더링되고 페이지에 표시될 때의 컨트롤 상태에 대한 정보가 포함되어 있으므로 ASP.NET 런타임에서 서버에 제출된 콘텐츠의 변경 내용을 비교하고 식별할 수 있습니다.

Blazor

Blazor 는 Angular 또는 React와 같은 JavaScript 프런트 엔드 프레임워크와 본질적으로 유사한 클라이언트 쪽 웹 UI 프레임워크입니다. Blazor 는 사용자 상호 작용을 처리하고 필요한 UI 업데이트를 렌더링합니다. Blazor는 요청-회신 모델을 기반으로 하지 않습니다. 사용자 상호 작용은 특정 HTTP 요청의 컨텍스트에 없는 이벤트로 처리됩니다.

Blazor 앱은 HTML 페이지에서 렌더링되는 하나 이상의 루트 구성 요소로 구성됩니다.

사용자가 구성 요소를 렌더링할 위치를 지정하는 방법과 사용자 상호 작용을 위해 구성 요소를 연결하는 방법은 특정 모델을 호스팅하는 것입니다.

Blazor 구성 요소는 재사용 가능한 UI 부분을 나타내는 .NET 클래스입니다. 각 구성 요소는 자체 상태를 유지하고 다른 구성 요소 렌더링을 포함할 수 있는 자체 렌더링 논리를 지정합니다. 구성 요소는 구성 요소의 상태를 업데이트하기 위해 특정 사용자 상호 작용에 대한 이벤트 처리기를 지정합니다.

구성 요소가 이벤트를 Blazor 처리한 후 구성 요소를 렌더링하고 렌더링된 출력에서 변경된 내용을 추적합니다. 구성 요소는 DOM(문서 개체 모델)에 직접 렌더링되지 않습니다. 그 대신 RenderTree가 변경 사항을 추적할 수 있도록 Blazor을 사용하여 메모리에 있는 DOM 표현으로 렌더링합니다. Blazor 는 새로 렌더링된 출력을 이전 출력과 비교하여 DOM에 효율적으로 적용되는 UI 차이(diff)를 계산합니다.

또한 구성 요소는 상태가 일반 UI 이벤트 외부에서 변경될 경우 렌더링되어야 함을 수동으로 나타낼 수도 있습니다. Blazor 는 SynchronizationContext 단일 논리 실행 스레드를 적용하는 데 사용됩니다. 구성 요소의 수명 주기 메서드와 Blazor가 발생시킨 모든 이벤트 콜백은 이 SynchronizationContext에서 실행됩니다.

이전다음