• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

컴포넌트 라이프사이클 함수와 라우터 beforeEnter 시점차이 질문

21.11.28 15:29 작성 조회수 128

1

안녕하세요 판교님..

제가 강의를 따라가면서 의문점이 생겼습니다.

라우터 네비게이션 가드 beforeEnter 로직을 만들고 나서

페이지에 스피너가 남아있는 현상이 갑자기 생기더라구요.

저는 아래 이미지처럼 Root 인스턴스에 스피너를 켜고 끄는 것을 하나의 함수로 만들어 이벤트버스에 하나의 이벤트만 등록을 하여 사용하고 있었습니다.

다른 부분은 HOC, Mixin으로 페이지 컴포넌트의 created() 에서 데이터 패칭을 하면서 스피너를 켜고 끄는것이 정상적으로 작동했었는데 이번에 라우터 가드 부분에 해당 로직을 추가했던 NewsView에서만 스피너가 남아있는 현상이 생겼습니다.

왜 그런지 이해가 안가서 하나하나 로그를 찍어보면서 디버깅을 하던 와중에

라우터 가드부분과 Root App의 created, action부분에 로그를 찍어보니 라우터 가드 함수가 Root App의 created보다 먼저 로그가 찍히는 것을 발견했습니다.

결국 이 의미는 루트 컴포넌트에서 이벤트 버스 인스턴스에 이벤트를 바인딩하기전에 라우터의 beforeEnter가 실행되어 맨처음의 이벤트 emit이 발생했음에도 이벤트 바인딩이 되어 있지 않아 스피너가 켜지지 않았고, 데이터 패칭 중에 루트 컴포넌트에서 이벤트버스 인스턴스에 이벤트가 바인딩 된 후에, 마지막 이벤트 emit에 의해 스피너가 켜져있는 상태로 남았다는 결론이 되는데요..

 

애초에 NewsView 페이지가 첫 페이지로 리다이렉트 되었기 때문에 루트 인스턴스가 생성되기 전에 네비게이션 가드가 실행된거기도 하고...

결국에 저 스피너 로직을 setTImeout과 같은 약간의 지연시간을 주면 잘 돌아가긴 하더라구요

그게 아니라면 토글식으로 스피너를 작동시키는 것이 아닌 판교님 강의해서 하신 것처럼 start시에는 true, end시에는 false를 각각 주는 방법으로 하면 티가 나진 않을텐데

이 현상을 잘 해결할 수 있는 방법은 어떻게 될까요?

 

글을 적다보니 길어진 것 같아 글이 잘 이해가 되실지 모르겠네요.. 죄송합니다

답변 1

답변을 작성해보세요.

0

안녕하세요 basestar011님, 상세하게 질문 적어주셨는데 질문 제목으로 적어주신 부분을 답변 드리면 될 것 같아요. beforeEnter는 해당 컴포넌트가 생성되기 전에 실행되는 코드이고 라이프 사이클 함수는 강의에서 안내해 드린 컴포넌트 생애주기에 따라서 실행되는 코드입니다 :)