proxy와 옵저버 패턴을 이용하여 상태관리하기

store

• 프록시를 이용해서 state라는 전역 상태 객체를 만듦
• 이 객체에는 모달창이나 overlay와 같은 컴포넌트들의 상태를 저장
• 해당 코드에서는 test1, test2라는 두개의 상태를 저장한다

// store.js

export const state = new Proxy(
  {
    test1: false,
    test2: false
  },
  {
    // state의 속성값이 변경될 때마다 호출되는 set 메소드
    set(target, key, value) {
      // 속성값 변경
      target[key] = value;
      // 속성값 변경을 감지하는 옵저버들에게 알림
      notifyObservers(key, value);
      // 속성값 변경이 완료된 후 true를 반환
      return true;
    }
  }
);

observer

• 옵저버를 등록하고 삭제하는 함수 그리고 옵저버에게 알리는 함수 필요
• 옵저버라는 맵을 만들어서 옵저버를 저장한다
• addObserver함수는 observers맵에 옵저버를 등록하는 함수이다. 만약 해당 속성에 등록된 옵저버가 없다면 새로운 배열을 만들어서 옵저버를 추가함
• removeObserver 함수는 observers 맵에서 옵저버를 삭제하는 함수이다. notifyObservers 함수는 set 핸들러에서 호출되는 함수로, 해당 속성에 등록된 옵저버에게 변경된 값을 알려준다.
• 하지만 removeObserver는 React와 같은 라이브러리나 프레임워크에서 사용되는 개념이기 때문에, 바닐라 자바스크립트에서는 필요하지 않음
• 결과적으로 store.js 파일에서 프록시와 옵저버 패턴을 이용해서 전역 상태 관리를 구현하고, Overlay.js, LoginModal.js, Header.js 파일에서 해당 상태를 사용하도록 구현할 수 있다.

const observers = new Map()

//옵저버를 등록
function addObserver(key,observer){
  if(!observers.has(key)){
    observers.set(key,[]);
  }
  observers.get(key).push(observer);
}

function notifyObservers(key,value){
  if(observers.has(key)){
    const observerList = observers.get(key);
    observerList.forEach(ob => ob(value))
  }
}

function removeObserver(key,observer){
  //list check
  if(observers.has(key)){
    const observerList = observer.get(key);
    //해당 옵저버가 존재하는 인덱스를 찾아서 제거
    const index = observerList.indexOf(observer);
    if(index !== -1){
      observerList.splice(index,1);
    }
  }
}