React 시작하기 - 웹 컴포넌트 사용

React와 웹 컴포넌트를 함께 사용하면, 다양한 기술과 라이브러리를 결합하여 강력하고 재사용 가능한 UI 컴포넌트를 구축할 수 있습니다. React는 컴포넌트 기반 아키텍처를 제공하는 JavaScript 라이브러리로, UI를 구축하는 데 매우 유용합니다. 반면에 웹 컴포넌트는 브라우저 네이티브 기술로, 재사용 가능한 HTML 요소를 작성할 수 있게 해줍니다. React와 웹 컴포넌트를 결합하여 사용할 수 있으며, 이는 다음과 같은 이유에서 유용합니다:

• 브라우저 독립성: 웹 컴포넌트는 브라우저 독립적인 방식으로 재사용 가능한 컴포넌트를 제공합니다.
• 캡슐화: 웹 컴포넌트는 스타일과 동작을 캡슐화하여 외부와의 충돌을 방지합니다.
• React의 효율성: React의 상태 관리와 가상 DOM을 활용하여 웹 컴포넌트를 효율적으로 제어할 수 있습니다.

React에서 웹 컴포넌트 사용하기

웹 컴포넌트 정의

먼저, 웹 컴포넌트를 정의합니다. 간단한 사용자 카드 컴포넌트를 만들어 보겠습니다.

// user-card.js
class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          border-radius: 8px;
          padding: 16px;
          margin: 10px;
          max-width: 200px;
          font-family: Arial, sans-serif;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h2 {
          margin: 0 0 10px;
          font-size: 18px;
        }
        p {
          margin: 5px 0;
          color: #666;
        }
      </style>
      <div class="card">
        <h2></h2>
        <p></p>
      </div>
    `;
  }

  static get observedAttributes() {
    return ['name', 'email'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.shadowRoot.querySelector('h2').textContent = newValue;
    }
    if (name === 'email') {
      this.shadowRoot.querySelector('p').textContent = `Email: ${newValue}`;
    }
  }
}

customElements.define('user-card', UserCard);

React에서 웹 컴포넌트 사용

이제 위에서 정의한 웹 컴포넌트를 React 애플리케이션에서 사용합니다.

// App.js
import React from 'react';
import './user-card.js'; // 웹 컴포넌트 가져오기

function App() {
  return (
    <div className="App">
      <h1>React와 웹 컴포넌트</h1>
      <user-card name="John Doe" email="john.doe@example.com"></user-card>
      <user-card name="Jane Smith" email="jane.smith@example.com"></user-card>
    </div>
  );
}

export default App;

프로젝트 구조

위의 예제를 실행하기 위해서는 프로젝트를 다음과 같이 구성할 수 있습니다.

/my-react-app
  /src
    ├── App.js
    ├── index.js
    └── user-card.js
  ├── package.json
  ├── public
  └── node_modules

React 프로젝트 설정

React 프로젝트를 설정하기 위해 Create React App을 사용할 수 있습니다. 다음 명령을 사용하여 프로젝트를 생성할 수 있습니다.

npx create-react-app my-react-app

예제 설명

• Custom Elements 정의: user-card.js 파일에서 사용자 카드를 나타내는 커스텀 요소를 정의합니다. 이 요소는 이름과 이메일을 속성으로 받아 이를 표시합니다.

• React에서 사용: App.js 파일에서 HTML 태그처럼 웹 컴포넌트를 사용합니다. React는 JSX를 통해 웹 컴포넌트를 쉽게 통합할 수 있습니다.

• 속성 바인딩: 웹 컴포넌트에 속성을 설정하여 동적으로 데이터를 전달할 수 있습니다. 속성이 변경되면 attributeChangedCallback 메서드가 호출되어 컴포넌트의 상태가 업데이트됩니다.

React와 웹 컴포넌트 간의 상호 운용성

React와 웹 컴포넌트를 함께 사용할 때 고려해야 할 몇 가지 사항이 있습니다.

속성 및 이벤트 처리

1. 속성 전달: 웹 컴포넌트는 문자열 속성을 통해 데이터와 상호작용합니다. 따라서, React 상태나 객체를 문자열로 변환하여 전달해야 합니다.

2. 이벤트 리스너: 웹 컴포넌트에서 커스텀 이벤트를 발행할 때는 addEventListener를 사용하여 React 컴포넌트에서 이를 처리할 수 있습니다.

이벤트 예제

웹 컴포넌트에서 커스텀 이벤트를 발행하고, React에서 이를 처리하는 예제를 보겠습니다.

// user-card.js
class UserCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });

    this.shadowRoot.innerHTML = `
      <style>
        .card {
          border: 1px solid #ccc;
          border-radius: 8px;
          padding: 16px;
          margin: 10px;
          max-width: 200px;
          font-family: Arial, sans-serif;
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h2 {
          margin: 0 0 10px;
          font-size: 18px;
        }
        p {
          margin: 5px 0;
          color: #666;
        }
        button {
          background-color: #3498db;
          color: white;
          border: none;
          padding: 8px;
          border-radius: 4px;
          cursor: pointer;
        }
      </style>
      <div class="card">
        <h2></h2>
        <p></p>
        <button>Click me</button>
      </div>
    `;

    this.shadowRoot.querySelector('button').addEventListener('click', () => {
      this.dispatchEvent(new CustomEvent('cardClick', { detail: { name: this.getAttribute('name') } }));
    });
  }

  static get observedAttributes() {
    return ['name', 'email'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'name') {
      this.shadowRoot.querySelector('h2').textContent = newValue;
    }
    if (name === 'email') {
      this.shadowRoot.querySelector('p').textContent = `Email: ${newValue}`;
    }
  }
}

customElements.define('user-card', UserCard);

// App.js
import React from 'react';
import './user-card.js';

function App() {
  const handleCardClick = (event) => {
    alert(`Card clicked: ${event.detail.name}`);
  };

  return (
    <div className="App">
      <h1>React와 웹 컴포넌트</h1>
      <user-card name="John Doe" email="john.doe@example.com" onCardClick={handleCardClick}></user-card>
      <user-card name="Jane Smith" email="jane.smith@example.com" onCardClick={handleCardClick}></user-card>
    </div>
  );
}

export default App;

예제 설명

• 이벤트 발행: 웹 컴포넌트는 CustomEvent를 사용하여 이벤트를 발행할 수 있습니다. 여기서는 cardClick 이벤트를 발행합니다.

• React에서 이벤트 처리: onCardClick 속성을 통해 React 컴포넌트에서 이벤트를 처리할 수 있습니다. 이 속성은 React에서 사용하는 표준 DOM 이벤트 리스너와 유사합니다.

• 이벤트 전달: dispatchEvent 메서드를 사용하여 웹 컴포넌트에서 이벤트를 발행하고, React에서 이를 감지하여 적절한 로직을 실행합니다.

스타일링

웹 컴포넌트는 자체적으로 스타일을 캡슐화하지만, React와 함께 사용할 때 전역 스타일과의 충돌을 방지하기 위해 다음과 같은 방법을 사용할 수 있습니다.

• CSS 변수: CSS 변수를 사용하여 웹 컴포넌트 내에서 스타일을 조정할 수 있습니다. 이 방법은 컴포넌트가 전역 스타일에 영향을 받지 않으면서도 동적으로 스타일을 변경할 수 있게 합니다.

• 전역 CSS: 전역 스타일을 웹 컴포넌트에 적용하고 싶다면, CSS 변수를 통해 컴포넌트 스타일을 제어할 수 있습니다.

React와 웹 컴포넌트 통합의 이점

• 재사용성

: 웹 컴포넌트를 사용하여 애플리케이션 간에 재사용 가능한 UI 요소를 구축할 수 있습니다.

• 호환성: 웹 컴포넌트는 표준화된 API를 사용하므로, 다양한 프레임워크와 라이브러리에서 호환성을 제공합니다.

• 캡슐화: 스타일과 동작을 컴포넌트 단위로 캡슐화하여, 전역 스타일이나 다른 컴포넌트와의 충돌을 방지할 수 있습니다.

한계

• 상태 관리: 웹 컴포넌트는 자체적으로 상태를 관리하지 않으므로, React의 상태 관리 기능과 결합하여 사용해야 합니다.

• 복잡성: 웹 컴포넌트와 React를 함께 사용할 때는 각 기술의 특성과 차이점을 이해하고 적절히 활용해야 합니다.

• 호환성 이슈: 일부 오래된 브라우저에서는 웹 컴포넌트가 완전히 지원되지 않을 수 있습니다. 이 경우 폴리필을 사용하여 호환성을 확보해야 합니다.

결론

React와 웹 컴포넌트를 결합하여 사용하는 것은 강력한 UI 컴포넌트를 구축하는 데 매우 유용합니다. 두 기술의 장점을 잘 활용하면 모던 웹 애플리케이션에서 재사용 가능하고 확장 가능한 UI를 쉽게 만들 수 있습니다. 이러한 결합은 다양한 프레임워크와 라이브러리 간의 통합 가능성을 제공하며, 개발자에게 더 많은 선택지를 제공합니다.

React와 웹 컴포넌트를 함께 사용할 때는 각 기술의 특성과 차이점을 이해하고 적절한 방식으로 결합하여 최적의 결과를 얻을 수 있습니다.