CustomEvent을 이용한 SPA 페이지

사용자가 직접 만드는 Event

new CustomEvent(typeArg, options);

typeArg

이벤트 이름을 나타내는 문자

options

다음 속성을 포함하는 객체입니다.

• "detail": 이 이벤트 내에 포함할, 이벤트의 세부 정보를 나타내는 값입니다. 기본 값은 null입니다. 처리기에서 [CustomEvent.detail](https://developer.mozilla.org/ko/docs/Web/API/CustomEvent/detail) 속성을 통해 이 값에 접근할 수 있습니다.
• [Event()](https://developer.mozilla.org/ko/docs/Web/API/Event/Event) 생성자의 옵션에 지정할 수 있는 모든 속성.

이렇게 커스텀한 이벤트는 dispatchEvent를 이용해서 전송한다.

const urlChange = new CustomEvent('urlChange', { detail: { pathname: "/" } });

document.dispatchEvent(urlChange);

예제

나 같은 경우는 JavaScript에서 spa 페이지 만들때 사용했다.

// Header.js
// menu 클릭시 다른 페이지로 이동하는 로직

leftMenu.addEventListener("click", () => {
  window.history.pushState("", "", "/");
  const urlChange = new CustomEvent("urlChange", {
    detail: { pathname: "/" }
  });
  document.dispatchEvent(urlChange);
});

rightMenu.addEventListener("click", () => {
  window.history.pushState("", "", "/signup");
  const urlChange = new CustomEvent("urlChange", {
    detail: { pathname: "/signup" }
  });
  document.dispatchEvent(urlChange);
});

// Router.js
document.addEventListener("urlChange", (e) => {
    const main = document.querySelector("main");
    const pathname = e.detail.pathname;
    const newMain = document.createElement("main");

    const homePage = new HomePage(newMain);
    const signupPage = new SignupPage(newMain);

    switch (pathname) {
      case "/":
        homePage.render();
        break;
      case "/signup":
        signupPage.render();
        break;
      default:
        break;
    }
    main.replaceWith(newMain);
  });

그냥 한 번 만들어본 예제

https://codesandbox.io/s/relaxed-dijkstra-m34m2l?file=/Router.js:168-706