Mixin
Mixin은 여러 컴포넌트들 사이에서 공통적으로 처리해야할 로직, 데이터등을 정의할 수 있는 속성이다.
0. Intro
오늘 좀 복잡한 컴포넌트를 개발하면서 여러 컴포넌트 사이에서 공통적으로 사용하는 함수 데이터들을 발견했다.
미리 정의된 코드들이 있고 이 코드에대한 특정 색깔을 정의하고 있는 데이터, 함수가 있었고, 이 함수를 3~4개의 컴포넌트에서 각자 사용하고 있었다. 각자 사용하고 있다는 말은 모두 각자 컴포넌트에서 methods 속성에 정의하였다는 뜻이다. 즉, 똑같은 기능을 하는 코드가 반복적으로 여러 군데에서 작성되었다는 것이다. 일단 똑같은 코드 블럭을 여러 곳에 붙여 넣기 하는 것이 불편했고 너무 비효율적이라는 생각이 들었다.
이런 공통 로직들을 상위 컴포넌트에 등록해놓건,전역으로 설정해놓고 하위 컴포넌트에서 참조해서 사용하는 방법이 없을까 생각했다.
수치를 나타내는 값을 3자리씩 끊어서 (,로 끊는 형식 ex: 35,221) 리턴하는 함수를 여러 컴포넌트에서 사용하고 있는 것을 발견하고 해당 함수가 mixin 폴더에 있다는 것을 알 수 있었다.
1. 사용법
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// mixin/gemsMx.js
export default {
data() {
return {
gemsColor: {
ruby: 'red',
sapphire: 'blue',
emerald: 'green'
}
}
},
mounted() {
this.fetchMyGems()
},
methods: {
fetchMyGems(){
this.GemsApi.getMyGems()
}
}
}
Mixin 객체 정의
- Vue 인스턴스를 생성할 때 필요한 option 객체의 속성과 동일하다. data, lifecycle hook, methods, computed 모두 정의할 수 있다.
- 보석과 관련된 기본 정보들을 가지고 있는 Mixin을 작성해보았다.
- 보석의 색깔에 대한 정보 (data)
- 내 보석을 가져오는 함수 (methods)
- 그 함수를 컴포넌트가 mount되었을 때 호출하는 로직 (mounted)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Mixin 사용하는 컴포넌트
<template>
</template>
<script>
import { gemsMx } from '~/mixin/gemsMx.js'
export default {
name: 'GemStore',
mixins: [ gemsMx ], // Mixin 사용
data() {
return {
isBudgetOver : false,
gemsList: []
}
},
computed() {
}
}
</script>
Mixin 컴포넌트에서 사용
- 앞서 정의한 Mixin을 import 하여 재사용한다.
- Mixin의 정의한 내용들이 자동으로 컴포넌트에 정의된다. (반복되는 코드 작성 부분을 줄일 수 있다.)
- 컴포넌트는 Mixin의 속성을 overwrite할 수도, merge하여 사용할 수도 있다.
- merge될 경우 컴포넌트의 속성이 우선되어 적용된다.
2. 적용
Mixin 파일에 여러 컴포넌트에서 분산되어 반복적으로 작성되었던 코드들을 함수로 선언하였다. 따라서 분산되어 있던 중복 코드들은 모두 삭제해주었고, 정상적으로 이전과 같이 잘 작동했다. 리팩토링을 가볍게 한 셈이다.
3. 정리
공통으로 사용할 데이터, 함수들을 mixin 객체에 정의하고, 이것을 사용할 컴포넌트에서 해당 mixin을 등록하여 사용하면 된다. Mixin은 여러 컴포넌트에 영향을 주는만큼 잘 설계해서 정의해야 한다.
4. 추가
Vue 공식 문서에 보면 재활용이라는 개념에서 Mixin과 HOC를 비교하고 있다.