컴포넌트 캡슐화 shadow dom + React Component (Feat 채널톡, 센드버드 비교)

gun·2024년 4월 19일

지극히 개인 적인 생각으로 틀릴 수도 있습니다.
예제는 다루지 않으며, shadowDOM의 필요성과 동작 원리만 설명 합니다.

어느날, 프로덕트의 CSS가 이상하게 변경되었다는 이슈를 발견 했습니다.

css의 우선순위와 전역으로 작성하지 않은 css가 생겼고, 트러블 슈팅을 하여 내린 결론은 외부 saas 서비스에서 태그로 설정한 css가 프로적트의 서비스 까지 영향을 미치는 것을 발견 했습니다.

이는 개발자의 실수 또는 의도적으로 언제든 또 발생 할 수 있는 문제였고 이를 방지하기 위한 방법은 필수로 필요 했습니다.

ShadowDOM을 React Component와 같이 사용 할 수 있는 방법을 Library로 만들 계획을 하고 있으며, 이곳에서 내부 코드를 확인 할 수 있습니다.

StoryBook: https://design-system-cui-82ak.vercel.app/?path=/docs/customshadowdom--documentation
GIT: https://github.com/rjsdnql123/design-system/blob/main/package/cui/src/Components/ShadowDom/ShadowDom.tsx

복잡한 코드 구현 없이 내부 ShadowDOM을 만들어 주는 ShadowDOM

shadow dom

웹 개발에서 CSS 스타일 충돌은 오랫동안 문제가 되어왔습니다. 전역 스타일, 의도치 않은 스타일 상속, 그리고 개발자의 실수로 인해 예기치 않은 스타일 변경이 발생할 수 있습니다. 이러한 문제를 해결하기 위해 Shadow DOM이 등장했습니다.

Shadow DOM은 웹 컴포넌트 개념의 일부로, DOM 트리의 캡슐화된 하위 집합을 생성할 수 있는 기능입니다. Shadow DOM 내부에 정의된 스타일은 외부 DOM에 영향을 미치지 않으며, 반대로 외부 스타일 역시 Shadow DOM에 영향을 주지 않습니다. 이를 통해 CSS 스타일의 격리와 캡슐화를 실현할 수 있습니다.

Shadow DOM의 가장 큰 장점은 CSS 스타일 충돌을 방지할 수 있다는 점입니다. 전역 스타일이 Shadow DOM 외부로 누출되지 않으며, 개발자의 실수나 의도로 태그에 스타일을 추가해도 Shadow DOM 내부에서만 작동합니다. 이는 SaaS(Software as a Service) 서비스와 같이 여러 개의 웹 애플리케이션이 동일한 페이지에서 실행되는 경우에 특히 유용합니다.

예를 들어, 채널톡과 같은 실시간 채팅 서비스를 생각해봅시다. 이러한 서비스는 외부 웹사이트에 embed 되어야 하며, 외부 웹사이트의 스타일과 충돌하지 않아야 합니다. Shadow DOM을 사용하면 채팅 서비스의 스타일을 완벽하게 격리할 수 있으므로 외부 웹사이트의 스타일과 충돌하지 않습니다.

Shadow host: Shadow DOM이 붙어 있는 일반적인 DOM 노드
Shadow tree: Shadow DOM 안에 있는 DOM 트리
Shadow root: Shadow tree의 루트 노드
Shadow boundary: Shadow DOM이 끝나고 일반 DOM이 시작되는 곳

shdowhost -> shadowRoot -> shadowTree 가 만들어 집니다.

웹 컴포넌트의 중요한 측면은 캡슐화입니다. 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하게 유지될 수 있게 합니다. Shadow DOM API는 캡슐화의 핵심 파트이며, 숨겨진 분리된 DOM을 요소에 부착하는 방법을 제공합니다. 이 문서는 Shadow DOM 사용의 기본을 다룹니다.
-MDN-

"MDN에서는 shadowDOM을 캡슐화 해 코드를 분리하여 다른 부분들이 충돌하지 않게 하고, 분리된 DOM을 요소에 부착하는 방법" 이라고 하고 있습니다.

이 말의 뜻이 정확히 이해가 가지 않을 수 있기 때문에 예제와 함께 보겠습니다.

사진에 div 태그의 style을 보면, 전역으로 설정한 color와 background가 shadowDOM의 외부에는 영향을 끼치지 못하는 것을 확인 할 수 있습니다. 이는 외부 컨텐츠의 CSS를 오염 시키지 않기에 shadow DOM 내부에서는 CSS를 자유롭게 수정, 추가 할 수 있고, sideEffect를 최소화 할 수 있다는 장점을 갖고 있습니다.

언제 필요할까?

SaaS 서비스 개발: 외부 웹사이트에 embed 되는 서비스를 개발할 때, Shadow DOM을 사용하면 스타일 충돌을 방지할 수 있습니다.
웹 컴포넌트 개발: 웹 컴포넌트는 Shadow DOM을 활용하여 캡슐화된 스타일을 제공합니다. 이를 통해 컴포넌트 간 스타일 충돌을 방지할 수 있습니다.
타사 라이브러리 통합: 타사 라이브러리를 프로젝트에 통합할 때, Shadow DOM을 사용하면 라이브러리의 스타일이 프로젝트의 스타일과 충돌하지 않습니다.
스타일 격리 필요 시: 프로젝트 내에서 특정 영역의 스타일을 격리할 필요가 있을 때, Shadow DOM을 활용하면 스타일 캡슐화를 실현할 수 있습니다.

마무리

Shadow DOM은 CSS 스타일 충돌을 방지하고 스타일 캡슐화를 보장하는 강력한 도구입니다. 특히 SaaS 서비스나 웹 컴포넌트 개발에서 유용하며, 스타일 격리가 필요한 경우에도 활용할 수 있습니다. 개발자들은 Shadow DOM을 활용하여 더욱 견고하고 유지보수 가능한 웹 애플리케이션을 구축할 수 있습니다.