created() 훅 실행 시점과 기준

Question

created() 훅 실행 시점과 기준 질문 드립니다. HOC가 아닌 일반 vue 컴포넌트를 적용하면, 페이지 진입 시에만 created() 훅이 실행되고 이후에는 route가 변경되더라도 실행되지 않는 것을 발견했습니다. vue 내부적으로 렌더링된 컴포넌트를 캐싱한다고 보면 되는지, 캐싱이 된다면 이런 옵션은 어떻게 설정하면 되는지 궁금합니다. 관련 자료를 찾아보려고 했는데 잘 안나오네요. 답변 부탁드리고 혹시 관련된 참고 자료가 있다면 같이 전달 해주시면 감사하겠습니다. export const router = new VueRouter ( { mode : ' history ' , routes : [ { path : ' / ' , redirect : ' /news ' , }, { path : ' /news ' , name : ' news ' , component : ListView , }, { path : ' /ask ' , name : ' ask ' , component : ListView , }, { path : ' /jobs ' , name : ' jobs ' , component : ListView , }, ] } ); < template > < div > < list-item > < script > import ListItem from ' ../components/ListItem.vue ' ; export default { components: { ListItem }, }; < script > export default { created () { const pathName = this . $route . name ; const actionMapper = { news : " FETCH_NEWS " , ask : " FETCH_ASKS " , jobs : " FETCH_JOBS " , } ; this . $store . dispatch ( actionMapper [ pathName ]); }, computed: { listItems () { const pathName = this . $route . name ; const state = this . $store . state ; const stateMapper = { news : state . news , ask : state . asks , jobs : state . jobs , } ; return stateMapper [ pathName ]; }, }, };

캡틴판교 · Answer

안녕하세요 패트릭님 좋은 질문이네요 :) 일단 강의에서 HOC 컴포넌트는 모든 페이지에 공용으로 사용할 컴포넌트로 정의하였습니다. created 훅은 컴포넌트가 생성되었을 때만 호출되는 로직인데요. 따라서 HOC 컴포넌트는 앱이 실행될 때 최초에 한번만 생성되고 페이지를 전환하더라도 created()는 다시 호출되지 않습니다 :)