믹스인(Mixin)은 여러 클래스나 객체가 공유할 기능 묶음을 따로 정의해 두고, 상속 계층과 상관없이 섞어 넣는 재사용 방식이다. JavaScript에서는 "부모 클래스를 받아 기능을 더한 새 클래스를 돌려주는 함수"로 자주 구현한다.
const Serializable = Base => class extends Base {
serialize() { return JSON.stringify(this) }
}
const Validatable = Base => class extends Base {
validate() { return Object.values(this).every(v => v != null) }
}
class User extends Serializable(Validatable(Object)) {} // 둘을 섞어 넣는다- 단일 상속만 있는 언어에서 다중 상속(Multiple Inheritance)의 일부 효과를 낸다. 객체에는
Object.assign(target, mixin)으로 메서드를 복사해 넣는 방식도 있다 - 주의: 어떤 메서드가 어느 믹스인에서 왔는지 추적하기 어렵고, 이름이 겹치면 나중에 섞은 쪽이 조용히 덮어쓴다. 다중 상속에서 파이썬이 MRO(Method Resolution Order)로 정하는 메서드 탐색 순서 문제와 같은 계열이다
- React는 예전
createClass시절 믹스인을 지원했지만 이런 문제(암묵적 의존, 이름 충돌, 눈덩이처럼 커지는 복잡도) 때문에 고차 컴포넌트(Higher-Order Component)와 훅으로 옮겨 갔다 - 데코레이터와 비교: 믹스인은 클래스 정의 단계에서 기능을 섞고, 데코레이터 패턴은 객체를 감싸 실행 시점에 기능을 더한다
- 상속을 늘리기보다 필요한 객체를 포함해 위임하는 편이 단순할 때가 많다(상속보다 위임)
출처 책은 『자바스크립트 + 리액트 디자인 패턴』.