Convert react to web component

현재까지 진행상황 공유 (2025.01.10)

리액트를 웹 컴포넌트로 변환해야 하는 이유

• 프로젝트 필요성: DaleStudy에서 디자인 시스템 적용이 필요한 웹 컴포넌트 프로젝트가 존재
• 미래 호환성: 리액트 기반 디자인 시스템을 다른 프레임워크에서도 사용 가능하게 변환 필요

r2wc 라이브러리 선택 이유

• 오랜 지원: 2019년 최초 릴리즈, React 19까지 지원
• Shadow DOM 제어 가능: PandaCSS 스타일 적용 시 문제 해결 가능성

리액트를 웹 컴포넌트로 전환할 때 PandaCSS 설정을 가져오기 어려운 이유

• PandaCSS는 별도의 CSS파일을 만들지 않고 컴포넌트 파일 안에서 직접 스타일을 정의하는 방식을 사용
• 웹 컴포넌트는 Shadow DOM을 사용함으로서 캡슐화를 통해 마크업 구조, 스타일, 동작을 숨기고 페이지의 다른 코드로부터의 분리하여 각기 다른 부분들이 충돌하지 않게 하고, 코드가 깔끔하게 유지될 수 있게 함
• 이러한 Shadow DOM의 특성 때문에 r2wc를 사용해서 리액트 컴포넌트를 가져오더라도 PandaCSS의 스타일 속성들은 임포트 되지 않음

코드 예시

1. Shadow DOM을 활성화하지 않은 경우

import r2wc from "@r2wc/react-to-web-component";

const WcButton = r2wc(Button, {
  props: {
    children: "string",
  },
});

customElements.define("wc-button", WcButton);

위와 같이 <Button> 컴포넌트를 웹 컴포넌트로 변환하면 브라우저 개발자 도구에서 아래와 같이 <wc-button>의 세부 사항을 확인할 수 있다.

또한 PandaCSS의 스타일 속성들도 잘 적용되는 것을 볼 수 있다.

2. Shadow DOM을 활성화 한 경우

import r2wc from "@r2wc/react-to-web-component";

const WcButton = r2wc(Button, {
  shadow: "open", // Shadow DOM is opened
  props: {
    children: "string",
  },
});

customElements.define("wc-button", WcButton);

위와 같이 Shadow DOM을 활성화 시키면 브라우저 개발자 도구에 Shadow Root가 추가된 것을 볼 수 있다.

Shadow DOM의 캡슐화, 스타일 격리 특성 때문에 리액트 컴포넌트의 스타일이 더 이상 적용되지 않는 것을 확인할 수 있다.

Shadow DOM과 <slot> 사용 문제

• 웹 컴포넌트를 리액트 컴포넌트와 비슷한 방식으로 사용하기 위해서는 <slot>을 사용해야 함

<wc-button>Click Me<wc-button>

• 하지만 위에서 기술한 바와 같이 PandaCSS 스타일 적용 때문에 Shadow DOM을 비활성화 하게 되면 <slot>을 사용할 수 없음
• r2wc 라이브러리에서는 props 안에서 변수를 정의하고 리액트의 변수에 적용시킬 수 있음. 만약 리액트 컴포넌트의 children에 텍스트를 넣고 싶다면 props에서 children 변수를 정의하고 <wc-button children="Click Me">와 같은 방식으로 정의해 줘야 함

Reference

• Using shadow DOM
• r2wc props type 정의