Blazor 구성 요소 수명 주기 이해

Blazor 구성 요소에는 잘 정의된 수명 주기가 있으며, 이 수명 주기는 처음 만들어질 때 시작되고 제거될 때 종료됩니다. 특정 트리거에 대한 응답으로 발생하는 이벤트 집합은 구성 요소 수명 주기를 제어합니다. 해당 트리거에는 초기화되는 구성 요소, 구성 요소와 상호 작용하는 사용자 또는 구성 요소가 닫혀 있는 페이지가 포함됩니다.

이 단원에서는 Blazor 구성 요소 수명 주기 동안 발생하는 이벤트에 대해 알아봅니다. 이 이벤트를 처리하여 수행된 작업을 최적화하고 Blazor 페이지의 응답성을 높이는 방법을 알아봅니다.

Blazor 구성 요소 수명 주기

Blazor 구성 요소는 레이아웃 및 UI 논리를 정의하는 Blazor 앱의 뷰를 나타냅니다. 이 구성 요소는 앱이 실행될 때 HTML 태그를 생성합니다. 사용자 상호 작용 이벤트는 사용자 지정 코드를 트리거할 수 있으며 구성 요소는 표시를 다시 렌더링하도록 업데이트될 수 있습니다. 페이지가 닫히면 Blazor는 구성 요소를 제거하고 모든 리소스를 정리합니다. 사용자가 페이지로 돌아오면 새 인스턴스가 만들어집니다.

다음 다이어그램에서는 구성 요소의 수명 동안 발생하는 이벤트와 이러한 이벤트를 처리하는 데 사용할 수 있는 메서드를 보여줍니다. Blazor는 SetParametersAsync를 제외하고 각 메서드의 동기 및 비동기 버전을 둘 다 제공합니다.

모든 Blazor 구성 요소는 ComponentBase 클래스나 IComponent 인터페이스에서 상속하며, 이들은 표시된 메서드를 정의하고 기본 동작을 제공합니다. 해당 메서드를 재정의하여 이벤트를 처리합니다.

다이어그램에서는 수명 주기 메서드 간에 단일 스레드 흐름이 있음을 암시하지만 이러한 메서드의 비동기 버전을 사용하면 Blazor 앱이 렌더링 프로세스를 촉진할 수 있습니다. 예를 들어 await에서 첫 번째 SetParametersAsync가 발생하면 Blazor 구성 요소는 OnInitialized 및 OnInitializedAsync 메서드를 실행합니다. 대기한 문이 완료되면 SetParametersAsync의 실행 스레드가 다시 시작됩니다.

동일한 논리가 일련의 수명 주기 메서드 전체에 적용됩니다. 또한 await와 OnInitializedAsync 동안 발생하는 각 OnParametersSetAsync 작업은 구성 요소의 상태 변경을 나타내며, 페이지를 즉시 렌더링하도록 촉발할 수 있습니다. 초기화가 완전히 완료되기 전에 페이지가 여러 번 렌더링될 수 있습니다.

수명 주기 메서드 이해

각 구성 요소 수명 주기 메서드에는 특정 목적이 있으며 메서드를 재정의하여 구성 요소에 사용자 지정 논리를 추가할 수 있습니다. 다음 표에서는 수명 주기 메서드가 발생하는 순서대로 나열되고 해당 용도를 설명합니다.

SetParametersAsync 메서드

사용자가 Blazor 구성 요소가 포함된 페이지를 방문하면 Blazor 런타임은 구성 요소의 새 인스턴스를 만들고 기본 생성자를 실행합니다. 구성 요소가 생성되면 Blazor 런타임이 SetParametersAsync 메서드를 호출합니다.

구성 요소가 매개 변수를 정의하는 경우 Blazor 런타임은 이 매개 변수의 값을 호출 환경에서 구성 요소로 삽입합니다. 이러한 매개 변수는 ParameterView 개체에 포함되며 SetParametersAsync 메서드에 액세스할 수 있습니다. base.SetParametersAsync 메서드를 호출하여 구성 요소의 Parameter 속성을 이러한 값으로 채웁니다.

또는 다른 방식으로 매개 변수를 처리해야 하는 경우 이 메서드로 처리할 수 있습니다. 예를 들어 구성 요소에 전달된 매개 변수를 사용하기 전에 유효성을 검사해야 할 수 있습니다.

OnInitialized 및 OnInitializedAsync 메서드

OnInitialized 및 OnInitializedAsync 메서드를 재정의하여 사용자 지정 기능을 포함할 수 있습니다. 이 메서드는 SetParametersAsync 메서드가 ParameterAttribute 또는 CascadingParameterAttribute로 특성이 지정된 구성 요소의 매개 변수 기반 속성을 채운 후 실행됩니다. 이러한 메서드에서 초기화 논리를 실행합니다.

애플리케이션의 render-mode 속성이 Server로 설정된 경우 OnInitialized 및 OnInitializedAsync 메서드는 구성 요소 인스턴스에 대해 한 번만 실행됩니다. 구성 요소의 부모가 구성 요소 매개 변수를 수정하는 경우 SetParametersAsync 메서드는 다시 실행되지만 이러한 메서드는 실행되지 않습니다. 매개 변수가 변경될 때 구성 요소를 다시 초기화해야 하는 경우 SetParametersAsync 메서드를 사용합니다. 초기화를 한 번 수행하려면 다음 메서드를 사용합니다.

render-mode 속성이 ServerPrerendered로 설정된 경우 OnInitialized 및 OnInitializedAsync 메서드는 두 번 실행됩니다. 정적 페이지 출력을 생성하는 사전 렌더링 단계 중에 한 번 실행되고 서버가 브라우저에 대한 SignalR 연결을 설정할 때 다시 실행됩니다. Blazor 구성 요소 상태를 설정하는 데 사용하는 웹 서비스에서 데이터를 검색하는 등 이러한 메서드에서 비용이 많이 드는 초기화 작업을 수행할 수 있습니다. 이 경우 첫 번째 실행 중에 상태 정보를 캐시하고 두 번째 실행 중에 저장된 상태를 다시 사용합니다.

Blazor 구성 요소에서 사용하는 모든 종속성은 인스턴스가 생성된 후에 OnInitialized 또는 OnInitializedAsync 메서드 실행 전에 삽입됩니다. OnInitialized 또는 OnInitializedAsync 메서드에서 이러한 종속성에 의해 삽입된 개체를 사용할 수 있지만 그 이전에는 사용할 수 없습니다.

사전 렌더링 단계에서는 Blazor Server 구성 요소의 코드가 JavaScript 코드 호출과 같이 브라우저에 연결해야 하는 작업을 수행할 수 없습니다. OnAfterRender 또는 OnAfterRenderAsync 메서드에서 브라우저에 대한 연결을 사용하는 논리를 배치해야 합니다.

OnParametersSet 및 OnParametersSetAsync 메서드

OnParametersSet 및 OnParametersSetAsync 메서드는 구성 요소가 처음 렌더링될 때 OnInitialized 또는 OnInitializedAsync 메서드 뒤에 실행되거나 후속 렌더링에서 SetParametersAsync 메서드 뒤에 실행됩니다. SetParametersAsync와 마찬가지로 이러한 메서드는 구성 요소에 매개 변수가 없더라도 항상 호출됩니다.

각 메서드를 사용하여 계산된 속성에 대한 값 계산과 같이 구성 요소 매개 변수 값을 사용하는 초기화 작업을 완료합니다. 생성자에서 이러한 장기 실행 작업을 수행하지 마세요. 생성자는 동기식이므로 장기 실행 작업이 완료될 때까지 기다리면 구성 요소가 포함된 페이지의 응답성에 영향을 미칩니다.

OnAfterRender 및 OnAfterRenderAsync 메서드

OnAfterRender 및 OnAfterRenderAsync 메서드는 Blazor 런타임이 사용자 인터페이스의 구성 요소가 나타내는 보기를 업데이트해야 할 때마다 실행됩니다. 이 상태는 다음과 같은 경우에 자동으로 발생합니다.

• 예를 들어 구성 요소 상태는 OnInitialized 또는 OnInitializedAsync 메서드가 실행되거나 OnParametersSet 및 OnParametersSetAsync 메서드가 실행될 때 변경됩니다.
• UI 이벤트가 트리거됩니다.
• 애플리케이션 코드는 구성 요소의 StateHasChanged 메서드를 호출합니다.

외부 이벤트 또는 UI 트리거에서 StateHasChanged 호출 시 구성 요소는 조건부로 다시 렌더링됩니다. 다음 목록에서는 StateHasChanged를 포함한 메서드 호출의 순서를 자세히 설명합니다.

1. StateHasChanged: 구성 요소를 다시 렌더링해야 하는 것으로 표시합니다.
2. ShouldRender: 구성 요소가 렌더링되어야 하는지 여부를 나타내는 플래그를 반환합니다.
3. BuildRenderTree: 구성 요소를 렌더링합니다.

StateHasChanged 메서드는 구성 요소의 ShouldRender 메서드를 호출합니다. 이 메서드의 목적은 상태 변경 시 실제로 구성 요소가 보기를 다시 렌더링해야 하는지 여부를 확인하는 것입니다. 기본적으로 모든 상태 변경은 렌더링 작업을 트리거하지만, ShouldRender 메서드를 재정의하고 의사 결정 논리를 정의할 수 있습니다. ShouldRender 메서드는 보기를 다시 렌더링해야 하는 경우 true를 반환하고, 그렇지 않으면 false를 반환합니다.

구성 요소를 렌더링해야 하는 경우 이 메서드를 사용하여 BuildRenderTree 브라우저에서 UI를 표시하는 데 사용하는 DOM 버전을 업데이트할 수 있는 모델을 생성할 수 있습니다. ComponentBase 클래스에서 제공하는 기본 메서드 구현을 사용하거나 특정 요구 사항이 있는 경우 사용자 지정 논리로 재정의할 수 있습니다.

다음으로 구성 요소 보기가 렌더링되고 UI가 업데이트됩니다. 마지막으로 구성 요소는 OnAfterRender 및 OnAfterRenderAsync 메서드를 실행합니다. 이 시점에서 UI는 완벽하게 작동하며 JavaScript 및 DOM의 모든 요소와 상호 작용할 수 있습니다. 이러한 메서드를 사용하여 JS interop에서 JavaScript 코드를 호출하는 것과 같이 완전히 렌더링된 콘텐츠에 액세스해야 하는 다른 단계를 수행합니다.

OnAfterRender 및 OnAfterRenderAsync 메서드는 firstRender라는 부울 매개 변수를 사용합니다. 이 매개 변수는 메서드가 처음 실행될 때는 true이고 그 이후에는 false입니다. 구성 요소가 렌더링될 때마다 반복하는 경우 이 매개 변수를 평가하여 낭비될 수 있는 일회성 작업을 수행하고 리소스를 많이 사용할 수 있습니다.

Dispose 및 DisposeAsync 메서드

모든 .NET 클래스와 마찬가지로 Blazor 구성 요소는 관리되는 리소스와 관리되지 않는 리소스를 사용할 수 있습니다. 런타임은 관리되는 리소스를 자동으로 회수합니다. 그러나 IDisposable 또는 IAsyncDisposable 인터페이스를 구현하고 Dispose 또는 DisposeAsync 메서드를 제공하여 관리되지 않는 리소스를 해제해야 합니다. 이 사례는 서버에서 메모리 누수 가능성을 줄입니다.

수명 주기 메서드에서 예외 처리

Blazor 구성 요소에 대한 수명 주기 메서드가 실패하면 브라우저에 대한 SignalR 연결을 닫아 Blazor 앱의 작동을 중지합니다. 이 결과를 방지하려면 수명 주기 메서드에 대한 논리의 일부로 예외를 처리할 준비가 되어 있는지 확인합니다. 자세한 내용은 ASP.NET Core Blazor 앱의 오류 처리를 참조하세요.