Mixin Pattern

📌 목차

• 믹스인 패턴이란?
• 믹스인 패턴
• 믹스인 패턴 심화
• 결론

📌 믹스인 패턴이란?

재사용 가능한 함수들을 객체나 클래스에 추가하는 패턴입니다. Vue와 React에서도 비슷한 예제를 찾아볼수 있는데 Vue의 예시는 아래와 같습니다.

// mixin.js
export default {
  method: {
    greet() {
      console.log("Hello World!");
    }
  }
}

import mixin from './mixin'

export default {
   mixins: [mixin],
   created() {
     console.log(this.greet());
   }
}

그럼 자바스크립트에서 이걸 어떻게 표현할 수 있는지 한번 볼까요?

📌 믹스인 패턴

class Dog {
  constructor(name) {
    this.name = name;
  }
}

const dogFuntionality = {
  __proto__: animalFunctionality,
  bark(){ console.log(`${this.name} Bark!`); },
  swim(){ console.log(`${this.name} Swim!`); },
  walk() { super.walk(); },
  sleep() { super.sleep(); }
}

Object.assign(Dog.prototype, dogFuntionality);

const dog = new Dog('Eddie');
dog.bark(); // Eddie Bark!
dog.swim(); // Eddie Swim!

📌 믹스인 패턴 심화

class Dog {
  constructor(name) {
    this.name = name;
  }
}

const animalFunctionality = {
  walk() { console.log(`${this.name} walking...`); },
  sleep() { console.log(`${this.name} sleeping...`); },
};

const dogFuntionality = {
  __proto__: animalFunctionality,
  bark(){ console.log(`${this.name} Bark!`); },
  swim(){ console.log(`${this.name} Swim!`); },
  walk() { super.walk(); },
  sleep() { super.sleep(); }
}

// Object.assign(dogFuntionality, animalFunctionality); -> 위에 __proto__를 제거 하고 이렇게 사용해도 됩니다.
Object.assign(Dog.prototype, dogFuntionality);

const dog = new Dog('Eddie');
dog.bark(); // Eddie Bark!
dog.swim(); // Eddie Swim!
dog.walk(); // Eddie walking...
dog.sleep(); // Eddie sleeping...

📌 결론

믹스인 패턴은 함수들을 꺼내어서 재사용이 가능하게 만들어 줍니다. 이것은 정말 좋은 일이지요. 개발자에게 코드 중복은 피해야할 일이기도 하지만 복잡성이 올라갑니다. 그래서 리액트에서는 믹스인 패턴보다 HOC를 이용하라고 권장합니다.