vanillaJS에서 customElements를 활용하여 독립적인 상태 관리하기

[gabrielyoon7]

아마 React를 공부하다가 오시는 분들은 지금 바닐라JS 환경에서 불편한 점이 한 두가지가 아닐 것 같은데요

SPA가 아닌 환경에서 복잡한 기능을 구현하려니 바닐라 환경에서는 여간 쉬운 것이 아닐 것입니다.

다음 소개하는 글은 최근에 customElements를 학습하면서 조사한 내용입니다.

vanillaJS에서 customElements를 활용하여 독립적인 상태 관리하기\

제가 작성해드린 예제를 잘 조합해보면 React에 있는 상태 관리 기능을 적절하게 흉내낼 수 있을 것 같아요.

html 태그가 마치 살아있는 객체처럼 동작하는 모습을 볼 수 있을 것입니다.

단, #15 에 작성한 클래스 관련 정보를 먼저 읽고 오시는 것이 좋을 것 같습니다.

React는 지금 hook이 대세이고, 더이상 클래스형 문법을 사용하지 않기에 위 예제는 다소 낯선 문법들이 눈에 보일 수도 있을 것 같아요.

따라서 과거에 클래스형을 사용하던 시절의 React는 어땠는지 한번 구경 하고 오시는 것도 좋은 것 같습니다.

여기에 globalThis를 활용하면 모듈 환경에서도 전역 객체나 전역 변수를 사용할 수 있을 것입니다.

추가로 customElements에 대해서 어느 정도 적응 하시면 shadowDOM이라는 기능도 눈독을 들이실만 한 것 같습니다. 이 기능을 사용하면 특정 태그 안의 행동은 물론이고 css까지 독립적으로 동작하게 하는 행위가 가능합니다.

[gabrielyoon7]

여러분이 CustomElements에 대한 고민을 해봐야 하는 이유인 Will Web Components Replace Frontend Frameworks?