2022/10/24 - TIL

자바스크립트로 CBD 구현하기

/*
const eventHolder = [];
export default eventHolder;
*/

class Component {
	constructor(props) {
    this.props = props;
    this.#holdEvents();
  }
	//Component의 인스턴스를 생성할 때, 부모로부터 자식에게 값을 넘길 때
	//props에 담아서 넘긴다.

	setState(newState) {
    this.state = { ...this.state, ...newState };
    // if (this.state !== newState) this.state = newState;

    console.log('[RE-RENDERING] state:', this.state);
    render();
  }
	//component의 상태가 변하면 component를 새로 그린다

	#holdEvents() {
	//setState와는 다르게 외부에서는 접근할 수 없게 #를 사용하였다
    const events = this.addEventListener?.();
    if (!events) return;
    for (const event of events) {
	//addEventListener(){return [{type:"click", 
	//selector:".main_something", handler:func}, {}]}
	//이렇게 addEventListener는 객체를 반환하기 때문에 for문으로 받을 수 있다.  
    if (event.selector === 'window' || event.selector === null) {
        eventHolder.push(event);
	//중복된 이벤트는 입력되지 않는다.
        continue;
      }
      const duplicated = eventHolder.find(({ type, selector }) => 
						type === event.type && selector === event.selector);

      if (!duplicated) {
        const { selector, handler } = event;

        // handler를 monkey patch한다.
        event.handler = e => {
          // e.target이 selector의 하위 요소일 수도 있다.
          if (e.target.matches(selector) || e.target.closest(selector)) handler(e);
        };

        eventHolder.push(event);
      }
    }
  }

render() {
    throw new Error(`Component의 서브 클래스는 DOMString을 반환하는 'render' 메서드를 구현해야 합니다.`);
  }
}