CodeGym /행동 /Frontend SELF KO /믹스인과 컴포지션

믹스인과 컴포지션

Frontend SELF KO
레벨 40 , 레슨 4
사용 가능

11.1 믹스인

믹스인과 컴포지션은 JavaScript에서 코드 조직과 재사용을 위한 강력한 도구야. 이들은 고전적인 상속에 대한 대안을 제공하며, 유연하고 모듈화된 시스템을 만들 수 있게 해줘.

믹스인은 상속을 사용하지 않고 클래스에 기능을 추가할 수 있는 코드 재사용 방법이야. 믹스인은 다른 클래스나 객체에 복사할 수 있는 메서드와 속성을 포함한 객체야.

믹스인 사용 예시:

JavaScript
    
      const CanEat = {
        eat() {
          console.log('Eating...');
        }
      };

      const CanWalk = {
        walk() {
          console.log('Walking...');
        }
      };

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

      // 믹스인에서 메서드를 클래스 프로토타입으로 복사해요.
      Object.assign(Person.prototype, CanEat, CanWalk);

      const person = new Person('John');

      person.eat();  // 출력될 내용: Eating...
      person.walk(); // 출력될 내용: Walking...
    
  

믹스인의 장점:

  1. 코드 재사용: 믹스인은 클래스 간에 공통 메서드와 속성을 쉽게 공유할 수 있어.
  2. 유연성: 어떤 믹스인을 클래스에 적용할지 선택할 수 있어, 더 유연하게 코드 조직이 가능해.
  3. 상속의 제한 우회: 복잡한 상속 계층을 만들 필요 없이 기능을 추가할 수 있어.

믹스인의 문제점:

  1. 이름 충돌: 여러 믹스인을 합칠 때 메서드나 속성 이름이 충돌될 수 있어.
  2. 구조의 불명확성: 믹스인이 클래스 구조를 덜 명확하게 만들어, 코드 유지보수에 어려움을 줄 수 있어.

11.2 컴포지션

컴포지션은 객체를 병합하여 더 복잡한 동작을 형성하는 접근 방식이야. 작은 독립된 모듈로 시스템을 구축할 수 있어 코드가 더 유연하고 쉽게 확장 가능하게 만들어.

예제 1: 함수형 컴포지션

JavaScript
    
      function canEat(obj) {
        obj.eat = function() {
          console.log('Eating...');
        };
      }

      function canWalk(obj) {
        obj.walk = function() {
          console.log('Walking...');
        };
      }

      function Person(name) {
        this.name = name;
      }

      const person = new Person('John');
      canEat(person);
      canWalk(person);

      person.eat();  // 출력될 내용: Eating...
      person.walk(); // 출력될 내용: Walking...
    
  

예제 2: 클래스 기반 컴포지션

JavaScript
    
      class CanEat {
        eat() {
          console.log('Eating...');
        }
      }
      
      class CanWalk {
        walk() {
          console.log('Walking...');
        }
      }
      
      class Person {
        constructor(name) {
          this.name = name;
          // CanEat과 CanWalk 인스턴스를 생성해요.
          this.eater = new CanEat();
          this.walker = new CanWalk();
        }
      
        // 해당 인스턴스에 메서드를 위임해요.
        eat() {
          this.eater.eat();
        }
      
        walk() {
          this.walker.walk();
        }
      }
      
      const person = new Person('John');
      
      person.eat();  // 출력될 내용: Eating...
      person.walk(); // 출력될 내용: Walking...
    
  

컴포지션의 장점:

  1. 유연성: 다양한 행동을 쉽게 결합하고 재사용할 수 있어.
  2. 모듈성: 작고 독립적인 모듈을 생성해 테스트와 코드 유지관리를 쉽게 할 수 있어.
  3. 상속의 제한 우회: 깊은 클래스 계층구조와 다중 상속 문제를 피할 수 있어.

컴포지션의 문제점:

  1. 구현의 복잡성: 기능 병합을 위한 더 복잡한 로직이 필요할 수 있어.
  2. 코드 중복: 명시적으로 메서드와 속성을 병합해야 해서 코드 중복이 발생할 수 있어.

11.3 믹스인과 컴포지션 비교

믹스인:

  • 여러 클래스에 기능 추가를 쉽게 할 수 있어
  • 이름 충돌과 구조 불명확성을 유발할 수 있어

컴포지션:

  • 더 유연하고 모듈화되어 있어
  • 상속 문제를 피하지만 구현과 유지보수가 더 어려울 수 있어
코멘트
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION