Mixin을 사용해보며 느낀점들

📌 Mixin 이란?

객체지향 프로그래밍에서 mixin 은 필요한 메서드들을 포함하고 있는 클래스를 이용해서

상속없이 다른 클래스에 행동을 더해주는 하나의 방법입니다.
주로 서로 다른 컴포넌트에서 유사한 기능을 공유하고자 할때 사용하며

이러한 경우를 횡단 관심사 라고 합니다.

 

널리 사용되는 패러다임인만큼 React 와 Vue 등의 다양한 FE 아키텍쳐에서도

이 개념을 이용해서 재사용 가능한 로직을 분리하는 방법을 제시하고 있습니다.

 

1️⃣ ES6 의 class 를 이용한 mixin

Object.assign 을 이용한 메서드 복사를 사용하면 간단하게 mixin 패턴을 구현할 수 있습니다.

const GreetingMixin = {
    sayHi() {
        alert('Hello')
    }
    sayBye() {
        alert('Bye')
    }
}

class User {
    constructor(name) {
        this.name = name
    }
}

Object.assign(User.prototype, GreetingMixin);

new User('JeongHyeon').sayHi();

2️⃣ Vue 에서 mixin 을 이용한 컴포넌트 구성

Vue 에서는 mixin 을 이용한 컴포넌트 로직 재사용을 지원합니다.

Vue 3 에서도 여전히 mixin 을 지원하지만 몇가지 문제점들 때문에

Composition API 라는 다른 방법을 권장하고 있습니다.

Vue Mixin 컴포넌트 정의

import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class GreetingMixin extends Vue {
    // ... APIs
}

이렇게 사용합니다 😀

import { Mixins } from 'vue-property-decorator'

import GreetingMixin from './GreetingMixin.ts'

export default class Example extends Mixins(GreetingMixin) {
    // ...
}

3️⃣ React 15 에서 mixin 을 이용한 컴포넌트 구성

현재는 deprecated 된 방법이지만 한때 React 에서는 mixin 을 이용해서

재사용 가능한 로직을 분리하는 방법을 제공했었습니다.

import React from 'react';

const GreetingMixin = {
  sayHi() {
        /** */
  }
};

const MyComponent = React.createClass({
  mixins: [GreetingMixin],
  handleClick() {
    this.sayHi();
  },
  render() {
    return (
      <button onClick={this.handleClick}>Say Hi!</button>
    );
  }
});

export default MyComponent;

 

📌 Mixin 은 만능일까?

어느 패턴이나 그렇듯이, 모든 문제를 해결하는 단 하나의 은색 탄환은 존재하지 않습니다.

mixin 도 결국에는 한계점이 있고 이를 잘 알고 사용하는 것이 중요합니다.

다음은 제가 실제 업무에서 mixin 을 사용해보며 느낀 한계점들과 React 블로그 에 게재된 글을 읽어보며

공감한 부분을 정리한 내용들입니다.

 

1️⃣ Mixin 내부 메서드의 중복 위험이 있다.

규모가 작은 프로젝트에서는 큰 영향이 없을 수 있지만, 여러 개발자가 함께 진행하는

프로젝트에서는 mixin 내부에서 정의하는 메서드의 이름 충돌이 발생할 수도 있습니다.

예를 들어, 팀마다 다르지만 일반적으로 특정 액션에 대응하는 핸들러 함수들 같은 경우

handleClick 혹은 onClick 과 같이 일반적인 형태의 메서드들이

각각의 컴포넌트 내부에 정의되어 있는 것을 심심치 않게 볼 수 있는데,

만약 mixin 내부에서 동일한 이름을 가진 함수가 이미 존재한다면 충돌이 발생하게 됩니다.

 

물론 이러한 문제를 mixin 네이밍 규칙을 통해 해결할 수도 있지만,

모든 구성원이 해당 룰을 따라야 하고 외부 서드파티 라이브러리에도 동일한 컨벤션이 적용되어있다는
보장이 없기 때문에 100% 신뢰 가능한 방법은 아닙니다.

⭐️ Mixin naming convention 예시

이전에 Vue 를 통해 개발할 때에는 프로젝트 내에서 사용되는 mixin 에서

공개되는 API에 다음과 같이 prefix 를 부여하는 네이밍 규칙을 적용했습니다.

import { Vue, Component } from 'vue-property-decorator'

@Component({})
export default class GreetingMixin extends Vue {
    private name = 'owen'

    public GreetingMixin_sayHi() {
        console.log(`say hi to ${this.name}!`)
    }
}

2️⃣ Mixin 끼리 상호 간의 확장이 필요할 경우 문제가 생길 수 있다.

상호 독립적인 mixin 을 설계한다는 것은 실제 서비스를 구현하다 보면

굉장히 이상적이고 많은 노력을 필요로 한다는 것을 느낄 수 있습니다.

가끔은 서비스 요구사항에 따라 어쩔 수 없이 기존에 존재하는 특정 mixin 에 의존하는

다른 mixin 의 설계를 고려해야 하는 경우가 발생할 수도 있습니다.

 

하지만 이렇게 되면 두 mixin 사이의 의존성이 코드의 전반적인 유지보수성을 낮추고

복잡한 mixin 구조 때문에 새로운 개발자가 해당 코드로 작업할 때 어려움을 줄 수 있습니다.

어떤 변화가 side effect 를 불러올지 예측이 안되기 때문이죠.

3️⃣ Mixin 이 많을수록 분석이 어렵고 코드 복잡도가 증가한다.

바로 위 2번 에서 언급한 문제와 연관되는 문제입니다.

mixin 에서 정의한 메서드들은 해당 mixin 을 사용하는 컴포넌트에서 사용할 수 있습니다.

코드의 규모가 커지며 수많은 공통 로직들이 mixin 으로 관리되면

어떤 함수가 어디서부터 유래된 것이고 맥락 파악이 어려울 수 있습니다.

mixin 네이밍 규칙을 통해 대략적인 맥락은 파악 가능할 수도 있지만

서로 복잡하게 얽혀있는 mixin 들은 의존성에 의해 리팩토링을 어렵게 하고

서비스 로직 분석이 어려워집니다.

 

📌 더 작은 단위로 쪼개자!

✅ 고차 컴포넌트와 컴포넌트 합성

React 에서는 이러한 문제점을 알고 mixin 을 이용한 컴포넌트 확장 지원을 중지했습니다.

대안으로 상태 값을 공유하기 위해서 고차 컴포넌트(HOC) 나 render prop 를 사용하거나

컴포넌트 합성 과 같은 방법들을 통해 재사용성을 높이는 것을 안내하고 있습니다.

✅ React Hook 의 등장

React 16.8 부터 새로운 기능으로 등장한 hook 은 기존에 클래스 기반으로

컴포넌트를 구성하던 방식에서 벗어나 함수형으로 컴포넌트를 정의하고 상태를 관리하며

여러 React 의 기능을 사용할 수 있도록 하였습니다.

useState, useEffect , useRef 와 같이 빌트인으로 제공되는 hook 이외에도

개발자는 자신만의 hook 을 정의하고 재사용할 수 있게 되었습니다.

✅ Vue composition API

Vue 3.0 에 이르러서 Vue 진영에 새로운 컴포넌트 패러다임이 등장했습니다.

Composition API 는 규모가 큰 Vue 컴포넌트에서 발생하는 논리적 관심사의 단편화로 인한

복잡한 컴포넌트 및 유지보수성 저하라는 문제점을 해결하기 위해 제안되었습니다.

자세한 내용은 여기서 다루지 않지만, React Hook 과 유사한 형태로 재사용 가능한 로직을

함수 단위로 분리하여 사용할 수 있습니다.

 

📌 참고자료

Mixins Are Dead. Long Live Composition
믹스인
Mixins Considered Harmful - React Blog
소개 | Vue.js