[Part 12] Web Components vs React — 실전 비교와 함께 쓰는 법

[Part 12] Web Components vs React — 실전 비교와 함께 쓰는 법

지금까지 Web Components의 핵심 기술을 순서대로 살펴봤다.

이번 마지막 Part에서는 Web Components와 React를 비교해본다.

Web Components와 React는 모두 컴포넌트 기반 개발과 관련이 있다.

하지만 두 기술의 역할은 다르다.

Web Components는 브라우저 표준 기반의 컴포넌트 기술이다.

React는 UI를 만들기 위한 JavaScript 라이브러리다.

1. React란?

React는 화면 UI를 만들기 위한 JavaScript 라이브러리다.

React는 상태가 바뀌면 화면을 다시 그리는 방식에 강하다.

예를 들어 카운터 버튼을 만든다고 해보자.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

이 코드는 count라는 상태를 가지고 있다.

버튼을 클릭하면 count가 증가하고 화면도 자동으로 갱신된다.

React는 이런 상태 기반 UI를 만들기에 편리하다.

2. Web Components는 무엇을 해결할까?

Web Components는 브라우저 표준 기술로 재사용 가능한 UI 요소를 만드는 데 초점이 있다.

<ui-button>저장</ui-button>
<ui-card></ui-card>
<ui-modal></ui-modal>

이런 컴포넌트는 React가 없어도 동작할 수 있다.

일반 HTML 페이지, Vue 프로젝트, React 프로젝트 등 여러 환경에서 사용할 수 있다.

3. 가장 큰 차이

React와 Web Components의 가장 큰 차이는 기준점이다.

React는 JavaScript 라이브러리다.

Web Components는 브라우저 표준이다.

구분	React	Web Components
기반	JavaScript 라이브러리	브라우저 표준
작성 방식	JSX 중심	HTML, CSS, JavaScript
상태 관리	편리함	직접 설계 필요
스타일 격리	별도 방식 필요	Shadow DOM 제공
프레임워크 독립성	낮음	높음

4. Web Components가 적합한 경우

Web Components는 다음 상황에 적합하다.

• 여러 프레임워크에서 같은 UI를 써야 할 때
• 디자인 시스템을 프레임워크 독립적으로 만들고 싶을 때
• 외부 사이트에 삽입되는 위젯을 만들 때
• 브라우저 표준 기반 컴포넌트가 필요할 때
• 스타일 격리가 중요한 컴포넌트를 만들 때

예를 들어 React 프로젝트와 Vue 프로젝트가 동시에 존재하는 환경이라면 Web Components가 공통 UI로 적합할 수 있다.

5. React가 적합한 경우

React는 다음 상황에 적합하다.

• 복잡한 상태 관리가 필요한 애플리케이션
• SPA 구조의 웹 애플리케이션
• 라우팅과 데이터 패칭이 중요한 서비스
• React 생태계를 적극 활용해야 하는 프로젝트
• 빠른 화면 개발 생산성이 중요한 경우

SPA는 Single Page Application의 줄임말이다.

페이지 전체를 새로고침하지 않고 JavaScript로 화면을 바꿔가며 동작하는 웹 애플리케이션을 의미한다.

6. 둘은 경쟁 관계일까?

Web Components와 React는 완전히 같은 목적의 기술이 아니다.

React는 애플리케이션 화면을 효율적으로 만들기 위한 도구다.

Web Components는 재사용 가능한 표준 UI 요소를 만들기 위한 기술이다.

그래서 둘은 경쟁 관계라기보다는 함께 사용할 수 있는 관계에 가깝다.

7. React에서 Web Component 사용하기

React에서도 Web Component를 HTML 태그처럼 사용할 수 있다.

function App() {
  return (
    <div>
      <ui-button>
        저장
      </ui-button>
    </div>
  );
}

단순히 화면에 표시하는 것은 어렵지 않다.

하지만 이벤트와 복잡한 property 전달은 주의가 필요하다.

8. React에서 CustomEvent 받기

Web Component에서 발생한 CustomEvent를 React에서 받을 때는 ref를 사용하는 방식이 안전하다.

function App() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;

    const handleClick = (event) => {
      console.log(event.detail);
    };

    button.addEventListener('value-change', handleClick);

    return () => {
      button.removeEventListener('value-change', handleClick);
    };
  }, []);

  return (
    <ui-button ref={buttonRef}>
      저장
    </ui-button>
  );
}

useRef는 React에서 DOM 요소를 직접 참조할 때 사용하는 기능이다.

useEffect는 컴포넌트가 렌더링된 뒤 특정 작업을 실행할 때 사용한다.

이 코드에서는 Web Component에 직접 이벤트를 등록하고, 컴포넌트가 사라질 때 이벤트를 제거한다.

9. 단순 값과 복잡한 값 전달

단순 문자열은 attribute로 전달하기 쉽다.

<user-card name="사용자"></user-card>

하지만 객체나 배열 같은 복잡한 값은 attribute보다 property로 전달하는 것이 좋다.

userCard.user = {
  name: '사용자',
  role: '관리자'
};

attribute는 기본적으로 문자열 중심이기 때문이다.

10. 디자인 시스템 관점

Web Components는 디자인 시스템과 잘 어울린다.

디자인 시스템은 여러 프로젝트에서 공통으로 사용할 UI 규칙과 컴포넌트 모음이다.

<ui-button variant="primary">
  저장
</ui-button>

<ui-card>
  카드 내용
</ui-card>

<ui-modal>
  모달 내용
</ui-modal>

이런 컴포넌트는 React, Vue, 일반 HTML에서 모두 사용할 수 있다.

이 점이 Web Components의 큰 장점이다.

11. 실무 조합 추천

실무에서는 다음 조합을 고려할 수 있다.

• 애플리케이션 전체 개발은 React로 진행한다.
• 공통 UI 컴포넌트는 Web Components로 만든다.
• 디자인 토큰은 CSS 변수로 공유한다.
• 컴포넌트 이벤트는 CustomEvent로 전달한다.
• React에서는 ref로 이벤트와 property를 연결한다.

이렇게 하면 React의 개발 생산성과 Web Components의 재사용성을 함께 활용할 수 있다.

12. Web Components가 React를 대체할까?

Web Components가 React를 완전히 대체한다고 보기는 어렵다.

React는 복잡한 애플리케이션 상태 관리와 화면 렌더링에 강하다.

Web Components는 프레임워크에 독립적인 UI 컴포넌트를 만드는 데 강하다.

즉 목적이 다르다.

React로 애플리케이션을 만들고, Web Components로 공통 UI를 만드는 방식도 가능하다.

13. 전체 시리즈 정리

이번 Web Components 시리즈에서는 다음 내용을 다뤘다.

1. Web Components의 등장 배경과 핵심 기술
2. Custom Elements
3. Shadow DOM과 스타일 격리
4. Template과 Slot
5. Lifecycle Callbacks
6. Custom Events
7. 고급 스타일링 전략
8. Form 연동과 ElementInternals
9. static template 패턴과 메모리 최적화
10. Shadow DOM 사용 여부 비교
11. Props와 State 설계
12. React와의 비교 및 함께 쓰는 방법

14. 정리

Web Components와 React는 모두 컴포넌트 기반 개발과 관련이 있지만 역할이 다르다.

• React는 애플리케이션 UI 개발에 강하다.
• Web Components는 프레임워크 독립적인 UI 컴포넌트 제작에 강하다.
• Web Components는 브라우저 표준 기술이다.
• React와 Web Components는 함께 사용할 수 있다.
• 디자인 시스템이나 공통 UI 라이브러리에는 Web Components가 좋은 선택지가 될 수 있다.

Web Components의 핵심은 어렵게 생각할 필요 없다.

브라우저 표준 기술로 나만의 HTML 태그를 만들고, 여러 환경에서 재사용하는 것이다.