loading spinner 구현

Component lifecycle로 무한 loading spinner 해결

기존 loading spinner 시점

• 시작 : beforeRouteUpdate(라우터 변경 때마다)
• 종료 : mounted(완전히 마운트된 시점)

컴포넌트가 한번 인스턴스화되어 생성되면 created=>mounted를 거치고, 다시 해당 컴포넌트에 접근하면 key값을 설정해주지 않은 경우 lifecycle을 다시 거치지 않고 해당 인스턴스를 재활용(reuse)한다.

이로 인해 라우터를 변경해도 해당 컴포넌트가 이미 방문해서 인스턴스로 남아있으면 (visited) mounted를 거치지 않는다.

따라서 loading spinner가 시작은 되지만 종료가 되지 않는 것이다.

변경된 loading spinner 시점

• 시작 : created(컴포넌트 생성 시점. )
• 종료 : mounted로 동일

created를 안거치는 컴포넌트는 인스턴스로 남아있어 로딩이 오래 걸리지 않으므로 (거의 바로 전환) loading spinner를 적용할 필요가 없다고 판단했다. 또한 API 호출마다 loading spinner를 걸고 있다.