무효 클릭 IP 추적 중...
c#/blazor

[c# blazor] NavigationManager LocationChanged 이벤트란?

꼬예 2022. 7. 27.
[c# blazor] NavigationManager LocationChanged 이벤트란?

 

 

LocationChanged이벤트는 페이지를 이동할때 자동으로 발생되는 이벤트입니다.

 

 

이 글을 읽기 전 선수 지식 포스팅

 

사용할때는 NavigationManager클래스를 inject하여 사용하는데요.

 

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅

 

NavigationManager 클래스 원문 코드로 들어가보면

 

NavigationManager 원코드

 

LocationChanged라는 EventHander가 포함되어있습니다.

 

EventHandeler 원코드로 들어가보면,

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅

 

LocationChangedEventArgs를 두번째 인자로 받도록 세팅되어있습니다.

 

그렇다면 LocationChangedEventArgs는 어떤 녀석일까요?

 

LocationChangedEventArgs

 

LocationIsNavigationIntercepted(boolean 형태)라는 프러퍼티 정보를 가지고 있는 EventArgs입니다. 

 

이 두 프러퍼티가 무엇인지는 실습예제를 통해 알아보겠습니다.

 

1) 실습 파일 생성

실습파일 생성

 

실습을 위해 두개의 컴포넌트를 생성합니다.

 

Tests1.razor시작페이지, Test2.razor이동할 페이지 역할을 할것입니다.

 

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 1) 실습 파일 생성

 

Test2페이지로 이동 버튼을 눌러 의도적으로 LocationChanged이벤트를 발생 시켜보겠습니다.

 

2) LocationChanged이벤트에 함수 구독

발생시키기 앞서 LocationChanged이벤트에 우리가 넣고 싶은 기능을 가진 함수를 구독시켜줘야겠지요?

 

함수구독

 

OnLocationChanged라는 함수를 구독시켰습니다.

 

OnLocationChanged

 

이 함수는 앞서 LocationChanged의 포함되어있는 프러퍼티들의 정체를 알아내기 위해서 임의로 작성해본 코드입니다.

 

이제 이벤트를 발생시켜보겠습니다.

 

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 2) LocationChanged이벤트에 함수 구독

 

3) Location, IsNavigationIntercepted 값 확인

디버깅 모드에서 중단점을 통해 각각의 값을 확인해보겠습니다.

 

디버깅

 

Location이동할 url주소 입니다.

그렇다면 IsNavigationInterceptedtrue는 뭘 의미할까요?

 

정답부터 말하면 href를 통해 접근하는 경우 true이고, NavigateTo를 이용하여 이동할때는 false입니다.

(NavigateTo가 낯선분은 해당 포스팅 참조)

 

현재는 페이지 이동 버튼을 보시면 href로 세팅되어있습니다. 

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 3) Location, IsNavigationIntercepted 값 확인

 

이부분을 NavigateTo로 변경해보겠습니다.

 

4) NavigateTo로 접근시 IsNavigationIntercepted 값 확인

NavigateTo변경

 

href를 NavigateTo로 수정하였고, 다시 중단점을 통해 값의 변화가 있는지 확인해보겠습니다.

 

output:

 

중단점결과

 

IsNavigationIntercepted가 false로 바뀐걸 알 수 있습니다.

 

 

5) 가비지 제거

[c# blazor] NavigationManager LocationChanged 이벤트란? - 이 글을 읽기 전 선수 지식 포스팅 - 5) 가비지 제거

해당 이벤트 기능을 마친후 가비지가 쌓이지 않도록 Dispose()함수를 통해 구독된 함수들을 제거해주는것도 잊지 않도록 합시다!

 

  • 트위터 공유하기
  • 페이스북 공유하기
  • 카카오톡 공유하기
이 컨텐츠가 마음에 드셨다면 커피 한잔(후원) ☕

댓글

꼬예님의
글이 좋았다면 응원을 보내주세요!