@ 제가 핵심이라고 생각하는 부분만을 다시 정리했습니다.
@ 자세한 내용은 moggy.log에 정리가 굉장히 잘되어있습니다. 👍
기존에 하나의 클래스는 하나의 부모 클래스만
존재하는 불편함에서부터 Mixin은 시작되었습니다.
예를 들어 코끼리
와 참새
가 있습니다.
코끼리
와 참새
는 모두 동물
클래스를 상속합니다.
참새는 날수 있지만 코끼리는 날수 없죠?
그래서 동물
클래스에 원래 있던 fly()
메서드를 참새
클래스로 옮겨줍니다.
여기서 만약 코끼리 중에 날 수 있는 코끼리
가 있다면 어떻게 될까요?
이렇게 되면 또 날 수 있는 코끼리
를 위한 fly()
메서드를 새로 정의하여 넣어주어야 합니다.
이를 해결하기 위해
클래스를 행위 기반으로 정의를 하고(Mixin) 이를 모아
하나의 클래스에 대한 정의를 할 수 있도록 만들어진 설계 방식입니다.
(새로운 기술 x, 코드 설계 방식 o)
Mixin은 행동을 기반으로 만들어진 클래스 조각입니다.
실제 코드를 보면 이해가 빠를 것 같습니다.
// 나는 행위를 담당하는 Mixin
const FlyToMixin = (superclass) => class extends superclass {
flyTo(destination){
console.log(`${this.name} is flying to the ${destination}`);
}
}
// 먹는 행위를 담당하는 Mixin
const EatMixin = (superclass) => class extends superclass {
eat(food){
console.log(`${this.name} is eating ${food}`);
}
}
// 헤엄치는 행위를 담당하는 Mixin
const SwimAtMixin = (superclass) => class extends superclass {
swimAt(place){
console.log(`${this.name} is swiming at the ${place}`)
}
}
// 믹스인을 탑재한 Elephant
class Elephant extends SwimAtMixin(EatMixin(Animal)) { /*...*/ }
const myElephant = new Elephant('일반 코끼리');
myElephant.swimAt('river');
이제 하늘을 나는 코끼리도 금방 만들 수 있습니다.
class Dumbo extends FlyToMixin(Elephant) { /*...*/ }
// Object.assign 방식으로도 가능
const dumbo = new Dumbo("덤보");
// 믹스인
let sayHiMixin = {
sayHi() {
alert(`Hello ${this.name}`);
},
sayBye() {
alert(`Bye ${this.name}`);
}
};
// 사용법:
class User {
constructor(name) {
this.name = name;
}
}
// 메서드 복사
Object.assign(User.prototype, sayHiMixin);
// 이제 User가 인사를 할 수 있습니다.
new User("Dude").sayHi(); // Hello Dude!