LocationChanged이벤트는 페이지를 이동할때 자동으로 발생되는 이벤트입니다.
이 글을 읽기 전 선수 지식 포스팅
사용할때는 NavigationManager클래스를 inject하여 사용하는데요.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
NavigationManager 클래스 원문 코드로 들어가보면
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 NavigationManager 원코드](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
LocationChanged라는 EventHander가 포함되어있습니다.
EventHandeler 원코드로 들어가보면,
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
LocationChangedEventArgs를 두번째 인자로 받도록 세팅되어있습니다.
그렇다면 LocationChangedEventArgs는 어떤 녀석일까요?
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 LocationChangedEventArgs](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
Location과 IsNavigationIntercepted(boolean 형태)라는 프러퍼티 정보를 가지고 있는 EventArgs입니다.
이 두 프러퍼티가 무엇인지는 실습예제를 통해 알아보겠습니다.
1) 실습 파일 생성
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 1) 실습 파일 생성 실습파일 생성](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
실습을 위해 두개의 컴포넌트를 생성합니다.
Tests1.razor가 시작페이지, Test2.razor가 이동할 페이지 역할을 할것입니다.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 1) 실습 파일 생성 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 1) 실습 파일 생성](http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png)
Test2페이지로 이동 버튼을 눌러 의도적으로 LocationChanged이벤트를 발생 시켜보겠습니다.
2) LocationChanged이벤트에 함수 구독
발생시키기 앞서 LocationChanged이벤트에 우리가 넣고 싶은 기능을 가진 함수를 구독시켜줘야겠지요?
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 2) LocationChanged이벤트에 함수 구독 함수구독](https://blog.kakaocdn.net/dn/3SvyI/btrIjLszhhM/6BN7BEPI8cpQam4BmbDzN0/img.png)
OnLocationChanged라는 함수를 구독시켰습니다.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 2) LocationChanged이벤트에 함수 구독 OnLocationChanged](https://blog.kakaocdn.net/dn/baqnqm/btrIjNRtvXs/FjDrxVoaayCr3xn7kaAFRk/img.png)
이 함수는 앞서 LocationChanged의 포함되어있는 프러퍼티들의 정체를 알아내기 위해서 임의로 작성해본 코드입니다.
이제 이벤트를 발생시켜보겠습니다.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 2) LocationChanged이벤트에 함수 구독 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 2) LocationChanged이벤트에 함수 구독](https://blog.kakaocdn.net/dn/by0K1v/btrIlwBGzym/RyMg7Qu1yT36H4BSQN7kMK/img.png)
3) Location, IsNavigationIntercepted 값 확인
디버깅 모드에서 중단점을 통해 각각의 값을 확인해보겠습니다.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 3) Location, IsNavigationIntercepted 값 확인 디버깅](https://blog.kakaocdn.net/dn/dYsqui/btrIjOpjMGG/YYTghVhNBocetBtHBnqff1/img.png)
Location은 이동할 url주소 입니다.
그렇다면 IsNavigationIntercepted의 true는 뭘 의미할까요?
정답부터 말하면 href를 통해 접근하는 경우 true이고, NavigateTo를 이용하여 이동할때는 false입니다.
(NavigateTo가 낯선분은 해당 포스팅 참조)
현재는 페이지 이동 버튼을 보시면 href로 세팅되어있습니다.
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 3) Location, IsNavigationIntercepted 값 확인 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 3) Location, IsNavigationIntercepted 값 확인](https://blog.kakaocdn.net/dn/4VQP4/btrIiJ9RhKg/TX0AOzHGyOAFfS1SpAXjP1/img.png)
이부분을 NavigateTo로 변경해보겠습니다.
4) NavigateTo로 접근시 IsNavigationIntercepted 값 확인
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 4) NavigateTo로 접근시 IsNavigationIntercepted 값 확인 NavigateTo변경](https://blog.kakaocdn.net/dn/IS88J/btrIh40zwi3/i17CsWZhkEWOemmJzhEwP0/img.png)
href를 NavigateTo로 수정하였고, 다시 중단점을 통해 값의 변화가 있는지 확인해보겠습니다.
output:
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 4) NavigateTo로 접근시 IsNavigationIntercepted 값 확인 중단점결과](https://blog.kakaocdn.net/dn/r9iJm/btrIfRU9cWo/YLqj2IOrmOVKIyYeMEqw71/img.png)
IsNavigationIntercepted가 false로 바뀐걸 알 수 있습니다.
5) 가비지 제거
![[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 5) 가비지 제거 [c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 5) 가비지 제거](https://blog.kakaocdn.net/dn/cXIACx/btrIhkbHLfW/C1PEELJfMT5QkqtuoxhkKK/img.png)
해당 이벤트 기능을 마친후 가비지가 쌓이지 않도록 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 |
댓글
꼬예님의
글이 좋았다면 응원을 보내주세요!
이 글이 도움이 됐다면, 응원 댓글을 써보세요. 블로거에게 지급되는 응원금은 새로운 창작의 큰 힘이 됩니다.
응원 댓글은 만 14세 이상 카카오계정 이용자라면 누구나 편하게 작성, 결제할 수 있습니다.
글 본문, 댓글 목록 등을 통해 응원한 팬과 응원 댓글, 응원금을 강조해 보여줍니다.
응원금은 앱에서는 인앱결제, 웹에서는 카카오페이 및 신용카드로 결제할 수 있습니다.