무엇을, 왜 웹 구성 요소. 반응 예

썸네일 소스: itnext

웹 구성 요소의 정의부터 시작하겠습니다.

webcomponents.org 기반

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.

정의에서 우리는 웹 구성 요소를 사용하여 기본적으로 웹 구성 요소는 기본적으로 사용자 지정 html 태그 집합이기 때문에 html을 사용하는 모든 프로젝트에서 재사용할 수 있는 구성 요소를 생성한다는 것을 알고 있습니다.

이것이 중요한 이유와 웹 구성 요소를 사용하여 프로젝트를 구축할 때의 이점은 무엇입니까? 인기 있는 프레임워크나 라이브러리를 사용하지 않는 이유는 무엇입니까?
잘. 그것이 웹 컴포넌트의 아름다움입니다. html을 구축하고 사용한 모든 프레임워크는 웹 구성 요소에서 지원됩니다.

다시 돌아와 그게 중요한 이유
우리는 그것의 모든 장점을 이야기하지 않을 것입니다. 이 기사에서 우리는 내가 매우 흥미로운 것을 발견한 한 가지에 초점을 맞추고 있습니다.

공유 리소스 및 범위 지정
웹 컴포넌트를 사용하여. 애플리케이션에 있는 리소스 범위를 지정하고 모든 웹 애플리케이션에서 공유할 수 있습니다.

특정 프레임워크나 라이브러리를 대상으로 하지 않는 라이브러리를 구축한다고 상상해 보십시오.
이것은 매우 유용할 것입니다

예를 들어 React 애플리케이션에서
react는 html을 사용하여 구성 요소를 렌더링하기 때문에 웹 구성 요소를 반응에 포함할 수 있습니다.

이 예를 살펴보면

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

example source

렌더링에 반응 애플리케이션에 구축한 웹 구성 요소를 추가하기만 하면 됩니다. className 대신 class를 사용하는 웹 구성 요소에 주목해야 합니다.

웹 구성 요소를 사용하는 웹 애플리케이션에 반응 앱을 추가하여 반대 작업을 수행할 수도 있습니다.

웹 구성 요소를 작성하는 방법

class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);

example source

위 예제에서 웹 컴포넌트를 생성한 예제입니다. HTMLElement를 확장하는 클래스입니다. 그리고 그림자를 사용하여 요소의 범위를 분리합니다. 이렇게 하면 범위가 다른 구성 요소로 분리됩니다.

connectedCallback은 기본적으로 구성 요소가 렌더링되기 전에 실행되는 웹 구성 요소 수명 주기 방법 중 하나입니다.

Component Lifecycle

웹 컴포넌트를 실행하기 위해 해야 할 설정이 아직 남아 있습니다. 앱을 구성하려면 기본 웹팩에 대한 이해가 필요합니다.

그게 다야.

웹 구성 요소에 대해 자세히 알아보려면
webcomponents.org
web.dev

다음: 웹 구성 요소를 사용하여 프로젝트 빌드 시작 | 반응 프로젝트를 웹 구성 요소로 전환