웹 컴포넌트는 재사용할 수 있는 컴포넌트에 강한 캡슐화를 제공하는 반면, React는 DOM과 데이터를 동기화하는 선언적 라이브러리를 제공한다. 둘은 상호보완적이니 잘 사용해보자.

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

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <x-search>{this.props.name}</x-search>!</div>;
  }
}

⚠️ 주의 웹 컴포넌트는 강제성을 띄는 API를 열어놓는다.(예: video태그의 play(), pause()) 이러한 API에 접근하기 위해서 DOM노드에 ref를 걸어서 적용하고 랩핑하는 React 컴포넌트를 만들어서 사용하자.

많은 사람들이 착각하는것

function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>front</div>
      <div>back</div>
    </brick-flipbox>
  );
}

className ❌ ⇒ class O