[ Introduction ]
mixin 은 Vue.js 에서 재사용 가능한 기능을 한 곳에 묶어 코드의 중복을 줄여주기 위해 등장한 방법입니다. 예컨대, 이메일 혹은 비밀번호 등의 정규식 Rule 을 mixin 이라는 개념으로 묶어 한 곳에서 관리하고, 해당 정규식이 필요한 View 에서 mixin 을 가져다가 (import) 쓸 수 있습니다. 그러나, Mixin 을 사용할 때 주의해야 할 점이 있습니다. Mixin 내부에서 API 를 호출하는 것은 지양하는 것이 좋다는 것 입니다. 그 이유를 아래에서 함께 살펴보도록 하겠습니다.
[ Description ]
- 아래의 예제 및 설명은 모든 API 를 created 에서 호출한다고 가정하고 진행합니다.
[ 사전 지식 ]
- mixin 의 created() 는 view 의 created() 보다 항상 먼저 호출됩니다.
[ 문제의 제기 ]
- mixin 의 created() 에서 api 를 호출했을 경우, 모든 Logic 을 마치기 전에 view 의 created() 가 호출 됩니다.
* 필자는 위의 로직을 처음 만들었을 때, console 에 mixin step 1 -> mixin step 2 -> mixin step 3 -> vue step 1 -> vue step 2 -> vue step 3 이 찍힐 것으로 기대했다. 그 이유는 [사전 지식]의 예시 처럼 mixin 의 created() 가 view 의 created() 보다 항상 먼저 호출 되기 때문이다. 그러나 예상과는 달리 결과는 아래와 같았다.
* 위의 예시를 통해 알 수 있는건 mixin 의 created() 가 해당 mixin 파일을 호출한 view 의 created() 보다 항상 먼저 호출은 되지만 그렇다고 mixin 의 모든 로직이 항상 mixin 을 호출한 view 의 로직보다 선행된다는 것은 아니라는 것입니다. 요컨대, mixin 의 created() 에서 api 를 호출하고 그 응답 값을 해당 mixin 을 호출한 view 에서 사용하려는 것은 안전하지 않은 방법입니다.
[ 해결 방안 ]
- 위의 문제를 해결하려면 mixin 에서는 api 를 호출하는 함수를 정의만 하되 실제 해당 함수를 호출하는 것은 mixin 이 아닌 해당 mixin 을 호출한 view 에서 해야 한다. 필자는 위에 해당 방법의 예시로 아래 case 를 제시합니다.
[ 참고 ]
- 예시에 사용 된 코드는 vue-cli (3.9.2 version) 로 생성한 프로젝트에 기반하고 있습니다.
https://github.com/GwangGeun/vueJs-blog-content/blob/master/src/views/Mixin.vue
'Front-End > Vue.js & Vuex' 카테고리의 다른 글
| v-model 사용시 주의점 #1 (0) | 2020.01.26 |
|---|---|
| v-model 사용시 주의점 #2 (0) | 2020.01.19 |
