[Udemy Vue 완벽가이드 Section12] 159. 컴포넌트가 마운트될때 데이터 로딩하기

데이터를 전송하고 가져오는 작업을 해봤다.

여기에 추가할 기능이 더 있다.

페이지를 새로고침했을 때, 항상 제출된 모든 experiences를 로드하고싶다. 페이지를 새로고침해도 데이터가 백엔드 서버에 저장되어 유실되지 않는다.

 

새로고침하면 'Load Submitted Experiences'버튼을 클릭하지 않아도 자동으로 모든 제출된 경험들이 fetching되도록 해보자.

Vue.js를 통해서 아주 간단하게 할 수 있는 작업이다.

 

UserExperiences 컴포넌트를 보면, 데이터 fetching에 대한 코드가 있다. 바로, loadExperiences 메서드.

버튼 클릭 뿐만 아니라, 전체 컴포넌트가 최초로 로드될 때도 이 메서드를 트리거하자.

어떻게 하면 될까?

 

 

모든 컴포넌트는 Vue 생명주기를 따른다. UserExperiences.vue 컴포넌트에서 mounted훅을 추가해보자.

이 훅은 Vue앱이 마운트되었을때 트리거되는데, 훅이 트리거되면 앱이 완전히 초기화되었고 시작할 준비가 되었음을 나타낸다.

(노트: 본 컴포넌트의 'mounted()'훅은 오직 이 컴포넌트가 mount되었을 때만 트리거/호출된다.)

 

mount훅에 loadExperiences 메서드를 트리거하여 이 컴포넌트가 화면에 표시될 때 모든 experiences 또한 로드되도록 설정하자.

mounted(){
 this.loadExperiences();
}

 

이제 따로 'Load Submitted Experiences'버튼을 누르지 않아도 새로고침 시, 자동으로 모든 경험이 화면에 표시되는 걸 볼 수 있다.

 

아주 유용한 개선사항이다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.