자바스크립트 Observers 패턴의 활용 사례

08 Nov 2023

javascript

자바스크립트에서 Observers 패턴은 많은 활용 사례를 갖고 있습니다. Observers 패턴은 객체 간의 상호 작용을 기반으로 하며, 한 객체의 상태 변화를 다른 객체에게 알리고 업데이트할 수 있는 기능을 제공합니다.

이벤트 처리

일반적으로 자바스크립트에서 핸들러를 사용하여 이벤트를 처리합니다. 하지만 Observers 패턴을 사용하면 여러 객체가 한 이벤트에 반응할 수 있도록 할 수 있습니다. 예를 들어, 웹 페이지에서 버튼 클릭 이벤트가 발생하면 여러 컴포넌트들이 각자 다른 작업을 수행할 수 있습니다. 이렇게 하면 코드의 재사용성과 유지보수성이 향상됩니다.

// 옵저버를 등록하고 이벤트 발생을 처리하는 예제
class Observable {
  constructor() {
    this.observers = [];
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notifyObservers(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('이벤트 발생:', data);
  }
}

const observable = new Observable();
const observer1 = new Observer();
const observer2 = new Observer();

observable.addObserver(observer1);
observable.addObserver(observer2);

observable.notifyObservers('버튼 클릭');

데이터 변경 감지

Vue나 React와 같은 프론트엔드 프레임워크에서 Observers 패턴은 상태 변경을 감지하고 변경사항을 반영하는데 많이 사용됩니다. 이를 통해 자동으로 뷰를 업데이트하고 중복된 코드를 피할 수 있습니다. 예를 들어, Vue의 데이터 바인딩은 내부적으로 Observers 패턴을 사용하여 데이터 변경을 감지하고 화면을 업데이트합니다.

// Vue.js 데이터 변경 감지 예제
new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  mounted() {
    // 데이터 변경 감지
    this.$watch('message', function(newValue, oldValue) {
      console.log(`데이터 변경: ${oldValue} -> ${newValue}`);
    });
  },
  methods: {
    changeMessage() {
      this.message = '안녕하세요!';
    }
  }
});

비동기 작업 관리

비동기 작업을 처리하는 과정에서 Observers 패턴을 사용할 수 있습니다. 예를 들어, 자바스크립트의 Promise 객체는 비동기 작업에 대한 상태 변화를 알리는 메서드인 then과 catch를 포함하고 있습니다. 이러한 메서드는 Observers 패턴의 일종으로, Promise 객체의 상태가 변할 때마다 등록된 함수들을 실행하여 결과를 처리합니다.

// Promise 객체의 then 메서드를 사용한 예제
function asyncFunction() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('결과');
    }, 2000);
  });
}

asyncFunction().then(result => {
  console.log('비동기 작업 완료:', result);
}).catch(error => {
  console.error('에러 발생:', error);
});

위의 예제에서는 then 메서드를 사용하여 비동기 작업이 완료될 때 실행할 콜백 함수를 등록했습니다. 이 콜백 함수는 Observers 패턴으로 비동기 작업의 상태 변화를 감지하고 결과를 처리합니다.

Observers 패턴은 자바스크립트에서 다양한 활용 사례를 갖고 있으며, 객체 간의 상호 작용과 상태 변화를 관리하는 데 유용합니다. 이를 통해 코드의 유지보수성과 확장성을 향상시킬 수 있습니다.

#References