LocationChanged이벤트는 페이지를 이동할때 자동으로 발생되는 이벤트입니다.
이 글을 읽기 전 선수 지식 포스팅
사용할때는 NavigationManager클래스를 inject하여 사용하는데요.
NavigationManager 클래스 원문 코드로 들어가보면
LocationChanged라는 EventHander가 포함되어있습니다.
EventHandeler 원코드로 들어가보면,
LocationChangedEventArgs를 두번째 인자로 받도록 세팅되어있습니다.
그렇다면 LocationChangedEventArgs는 어떤 녀석일까요?
Location과 IsNavigationIntercepted(boolean 형태)라는 프러퍼티 정보를 가지고 있는 EventArgs입니다.
이 두 프러퍼티가 무엇인지는 실습예제를 통해 알아보겠습니다.
1) 실습 파일 생성
실습을 위해 두개의 컴포넌트를 생성합니다.
Tests1.razor가 시작페이지, Test2.razor가 이동할 페이지 역할을 할것입니다.
Test2페이지로 이동 버튼을 눌러 의도적으로 LocationChanged이벤트를 발생 시켜보겠습니다.
2) LocationChanged이벤트에 함수 구독
발생시키기 앞서 LocationChanged이벤트에 우리가 넣고 싶은 기능을 가진 함수를 구독시켜줘야겠지요?
OnLocationChanged라는 함수를 구독시켰습니다.
이 함수는 앞서 LocationChanged의 포함되어있는 프러퍼티들의 정체를 알아내기 위해서 임의로 작성해본 코드입니다.
이제 이벤트를 발생시켜보겠습니다.
3) Location, IsNavigationIntercepted 값 확인
디버깅 모드에서 중단점을 통해 각각의 값을 확인해보겠습니다.
Location은 이동할 url주소 입니다.
그렇다면 IsNavigationIntercepted의 true는 뭘 의미할까요?
정답부터 말하면 href를 통해 접근하는 경우 true이고, NavigateTo를 이용하여 이동할때는 false입니다.
(NavigateTo가 낯선분은 해당 포스팅 참조)
현재는 페이지 이동 버튼을 보시면 href로 세팅되어있습니다.
이부분을 NavigateTo로 변경해보겠습니다.
4) NavigateTo로 접근시 IsNavigationIntercepted 값 확인
href를 NavigateTo로 수정하였고, 다시 중단점을 통해 값의 변화가 있는지 확인해보겠습니다.
output:
IsNavigationIntercepted가 false로 바뀐걸 알 수 있습니다.
5) 가비지 제거
해당 이벤트 기능을 마친후 가비지가 쌓이지 않도록 Dispose()함수를 통해 구독된 함수들을 제거해주는것도 잊지 않도록 합시다!
'c# > blazor' 카테고리의 다른 글
[c# blazor] NavigateTo를 이용한 특정 페이지 이동방법 (0) | 2022.07.26 |
---|---|
[c# blazor] c# 코드 비하인드 파일 생성하는 방법 (0) | 2022.07.25 |
[c# blazor] IJSRuntime이란? (자바스크립트 사용) (0) | 2022.07.25 |
[c# blazor] 바인딩이란 ? (양방향, 단방향) (0) | 2022.07.22 |
댓글