Facade Pattern

 

 

 

여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태

 

각각의 클래스와 메서드들이 목적과 동적이 이해하기 어려워 가져다 쓰기 어려울 때

클래스를 재정리하는 것

 

 

 

facade 

- 여러 SubSystem들의 기능을 하나의 Facade Object로 정의하고, Client가 Facade Object를 사용하는 형태

 

 

SubSystem(하위 시스템)

- 수십 가지 라이브러리 혹은 클래스들

 

 

Actor(Client)

-  서브클래스에 직접 접근하는 대신 facade를 사용함

 

 

장점

1. 하위 시스켐의 복잡성이 줄어들어 외부에서 가져다 쓰기 쉬움

2. 복잡한 코드를 감춤으로서 시스템 코드를 모르더라도 facade 클래스만 이해하면 가져다 쓰기 쉬움

 

단점

1. 퍼사드가 모든 클래그에 결합된 객체가 될 수 있음

2. 추가적인 코드가 늘어나는 것이기 때문에 유지보수 측면에서 공수가 듦

 

 

 

 

---

예시 1

---

 

 

 

리팩토링전 

 

class Power {
  on() {
    console.log("Power on");
  }
}

class Computer {
  constructor() {
    this.power = new Power();
  }

  boot() {
    this.power.on();
    console.log("Computer booted");
  }
}

class Printer {
  print() {
    console.log("Printing");
  }
}

// 사용법
const computer = new Computer();
computer.boot();

const printer = new Printer();
printer.print();

 

사용할 때 동작 코드를 따로 묶어두지 않고

각각 동작

 

Computer 클래스와 Printer 클래스를 사용하는 것을 숨기지 않음

 

 

 

퍼사드 패턴 적용

class Power {
  on() {
    console.log("Power on");
  }
}

class Computer {
  constructor() {
    this.power = new Power();
  }

  boot() {
    this.power.on();
    console.log("Computer booted");
  }
}

class Printer {
  print() {
    console.log("Printing");
  }
}


//퍼사드
class ComputerFacade {
  constructor() {
    this.computer = new Computer();
    this.printer = new Printer();
  }

  run() {
    this.computer.boot();
    this.printer.print();
  }
}

// 사용법
const computerFacade = new ComputerFacade();
computerFacade.run();

 

 

컴퓨터를 켜는 동작을 할 때

computerFacade.run() 으로만 동작하면 됨

 

 

 

 

---

예시 2

---

 

리액트

 

import React from 'react';

// Button 컴포넌트의 props 타입 정의
type ButtonProps = {
  onClick: () => void;
  children: React.ReactNode;
};

// Button 컴포넌트
const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

// Button 컴포넌트를 사용하는 App 컴포넌트
const App: React.FC = () => {
  return (
    <div>
      <Button onClick={() => console.log('Button clicked')}>Click me</Button>
    </div>
  );
};

export default App;

 

 

 

MUI 사용시