[mjt] 믹스인

믹스인

믹스인이란?

• 믹스인(Mixin)은 다중 상속을 피하면서도 코드 재사용을 가능하게 하는 기법이다.
• JavaScript는 단일 상속만 지원하기 때문에, 여러 클래스로부터 기능을 가져오려면 믹스인 패턴을 활용해야 한다.

기본 개념

믹스인은 독립적인 메서드 집합을 객체에 추가하는 방식으로 동작한다.

let sayHiMixin = {
  sayHi() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  },
  sayBye() {
    console.log("안녕히 가세요!");
  },
};

// 이 믹스인을 클래스에 적용하려면 Object.assign()을 사용한다.
class User {
  constructor(name) {
    this.name = name;
  }
}

// User 클래스의 prototype에 믹스인 추가
Object.assign(User.prototype, sayHiMixin);

const user = new User("철수");
user.sayHi(); // "안녕하세요, 철수입니다."
user.sayBye(); // "안녕히 가세요!"

믹스인의 특징

• 1. 상속과 다름
     • 믹스인은 클래스 계층을 변경하지 않고 메서드를 추가함
     • Object.assign()을 사용하여 특정 클래스의 prototype에 기능을 주입
• 1. 여러 믹스인 조합 가능
     • 하나의 클래스에 여러 개의 믹스인을 적용할 수 있음
     • 유연한 기능 조합이 가능

여러 믹스인 적용하기

여러 개의 믹스인을 조합하여 사용할 수 있다.

let canJump = {
  jump() {
    console.log(`${this.name}가 점프했습니다!`);
  },
};

let canRun = {
  run() {
    console.log(`${this.name}가 달립니다!`);
  },
};

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

// 여러 믹스인을 적용
Object.assign(Person.prototype, canJump, canRun);

const p = new Person("민수");
p.jump(); // "민수가 점프했습니다!"
p.run(); // "민수가 달립니다!"

믹스인에 super 사용하기

믹스인이 기존 클래스 메서드를 확장해야 하는 경우, 메서드 내에서 super를 호출할 수도 있다.

let LoggerMixin = {
  log(message) {
    console.log(`[LOG] ${message}`);
  },
};

class Base {
  log(message) {
    console.log(`[Base] ${message}`);
  }
}

class App extends Base {
  constructor(name) {
    super();
    this.name = name;
  }

  log(message) {
    super.log(`[${this.name}] ${message}`);
  }
}

Object.assign(App.prototype, LoggerMixin);

const app = new App("MyApp");
app.log("시작됨"); // "[Base] [MyApp] 시작됨"

믹스인 사용시 주의할 점

• 1. 프로퍼티 충돌 방지
     • 믹스인이 클래스의 기존 메서드를 덮어쓰지 않도록 주의해야 함
     • 믹스인끼리 충돌이 발생하면 의도치 않은 동작이 나올 수 있음
• 1. super 호출 주의
     • 믹스인 내에서 super를 사용하면 어떤 부모 클래스가 호출될지 보장되지 않음
     • 따라서 super 호출이 필요한 경우 믹스인을 상속 기반으로 설계하는 것이 더 나을 수도 있음

정리

• 믹스인이란?
  • 여러 클래스로부터 기능을 재사용하는 패턴
  • Object.assign(Class.prototype, mixinObject) 형태로 사용
• 믹스인의 장점
  • 다중 상속을 피하면서 코드 재사용 가능
  • 여러 개의 믹스인 조합 가능
• 믹스인 사용 시 주의할 점
  • 메서드 이름 충돌 방지
  • super 호출 시 부모 클래스 보장이 안 될 수 있음

참고 문서

• ko.javascript.info - 믹스인