React의 새로운 웹 컴포넌트 지원 살펴보기

지난주에 React는 @experimental 브랜치에서 오랫동안 기다려온 기능인 support for custom element attributes and properties을 선보였습니다. 그것이 무엇을 의미하는지, 그리고 내가 그것에 대해 흥분한 이유를 살펴봅시다.

왜 웹 컴포넌트인가?

Web components은 개발자가 자신의 사용자 지정 HTML 요소를 정의하여 모든 프레임워크에서 작동하는 UI 구성 요소를 구축할 수 있도록 하는 웹 표준 모음입니다.

React만 사용하는 경우 해결 방법을 사용할 필요 없이 Vaadin components 와 같은 새로운 품질 구성 요소에 액세스할 수 있습니다.

프로젝트 간에 서로 다른 프레임워크를 사용하는 조직에 속해 있는 경우 웹 구성 요소 지원을 통해 각 프로젝트에서 휠(또는 날짜 선택기)을 재발명할 필요 없이 모든 프로젝트에서 동일한 구성 요소 집합을 보다 쉽게 ​​사용할 수 있습니다. 그것들은 디자인 시스템을 위한 훌륭한 기반입니다.

어떻게 작동합니까?

@experimental 및 react의 react-dom 버전을 설치하여 시작합니다.

npm i react@experimental react-dom@experimental

그런 다음 사용하려는 웹 구성 요소를 설치합니다.

npm i @vaadin/vaadin-date-picker

일반 가져오기 문을 사용하여 웹 구성 요소를 가져옵니다.

import "@vaadin/vaadin-date-picker";

그런 다음 JSX에서 이를 사용하여 다른 구성 요소와 마찬가지로 이벤트 및 속성을 바인딩할 수 있습니다. 구성 요소 이름에서 카멜 케이스 대신 대시를 사용하는 방법에 유의하십시오.

return (
  <vaadin-date-picker
    label="When were you born?"
    i18n={localizedStrings}
    onChange={handleChange}
  />
);

시도해 볼 수 있는 실행 예는 다음과 같습니다.

(아직) 작동하지 않는 것은 무엇입니까?

사용자 지정 HTML 요소 지원과 관련하여 아직 해결되지 않은 몇 가지 문제가 있습니다. 예를 들어 onChange 이벤트 핸들러가 제대로 작동하지 않습니다( issue ).

유형 정의가 아직 업데이트되지 않았기 때문에 TypeScript와 함께 웹 구성 요소를 사용하는 것도 여전히 어렵습니다.

언제 출시되나요?

React의 공식 웹 구성 요소 지원은 팀이 릴리스에 대한 확신을 가질 수 있을 만큼 충분한 피드백을 받으면 React 18과 동시에 릴리스될 수 있습니다. 그렇지 않으면 릴리스가 19로 다시 푸시될 수 있습니다.

React 18에서 웹 구성 요소 지원에 관심이 있는 경우 사용해 보고 모든 문제를 GitHubhttps://github.com/facebook/react/issues의 React 팀에 보고하십시오.

전체 스택 데모 앱

시도해 보고 싶다면 여기에 전체 스택 Spring Boot + React 앱이 있습니다. https://github.com/marcushellberg/fusion-reactor