WordPress 플러그인에서 Gutenberg의 React 구성 요소 재사용

며칠 전 David는 React를 소개하는 4개의 블로그 게시물 시리즈를 완료했습니다. 그곳에서 그는 React를 시작하여 WordPress에서 사용자 인터페이스를 쉽게 만드는 방법을 설명했습니다. 특히 이 게시물 시리즈의 2부에서 David는 개발 환경을 준비하는 방법과 간단한 React 구성 요소를 만드는 방법을 설명했습니다. 오늘 우리는 자신의 React 구성 요소를 만드는 것 외에도 기존 구성 요소를 재사용하는 것이 매우 좋은 아이디어라는 것을 알게 될 것입니다.

구텐베르그가 워드프레스에 등장한 이후로 자바스크립트와 React 프레임워크는 워드프레스 개발 스택의 핵심 부분이 되었습니다. 그렇기 때문에 이러한 기술에 익숙하지 않다면 최대한 빨리 배워야 합니다. 그렇게 했고 React를 사용하여 프리미엄 플러그인을 완전히 다시 코딩했습니다. 이것은 이미 React 구성 요소에서 사용했던 모든 사용자 인터페이스를 변환하는 것을 의미했습니다.

프로그래머는 바퀴를 재발명해서는 안 되며 소프트웨어 개발 세계에서는 항상 더 적은 것이 더 많기 때문에 오늘 우리는 WordPress에서 기존 React 구성 요소를 재사용하는 방법을 볼 것입니다.

WordPress에 포함된 React 구성 요소

WordPress는 Gutenberg의 @wordpress/components 패키지를 통해 개발에 재사용할 수 있는 80개 이상의 React 구성 요소를 제공합니다.

여기 Gutenberg 프로젝트의 Github에서 찾을 수 있는 각 구성 요소 폴더에는 각 구성 요소의 JavaScript 소스 코드와 해당 CSS 스타일, 사용 방법 및 시기를 알려주는 문서가 있습니다.

Nelio에서 우리의 새로운 React 인터페이스에 사용한 구성 요소 중에서 버튼을 정의하기 위해 Button 및 ButtonGroup 을 강조 표시할 가치가 있습니다. CheckboxControl , InputControl , NumberControl , RadioControl , RangeControl , SelectControl 또는 TextControl 과 같은 필드 및 옵션에 대한 모든 컨트롤러. 또는 탭 인터페이스의 경우 TabPanel 이나 플로팅 대화 상자의 경우 Popover 및 Modal 도 있습니다. 그리고 더 많은 것들이 있습니다…

이러한 구성 요소를 처음부터 개발해야 했다면 분명히 지금 프리미엄 플러그인의 새로운 React 인터페이스를 프로그래밍하고 있을 것입니다. 기존 구성 요소를 재사용하는 것은 개발자로서 시간을 절약할 수 있는 최선의 방법입니다. 그리고 WordPress용 Gutenberg에서 제공하는 것은 플러그인에 적합합니다.

WordPress React 구성 요소를 재사용하는 방법

React로 개발된 인터페이스에서 버튼을 사용하고 싶다고 상상해보십시오. Gutenberg의 기존 구성 요소 덕분에 다음 예제에서 볼 수 있듯이 Button 구성 요소를 직접 사용할 수 있습니다.

 /** * WordPress dependencies */ import { Button } from '@wordpress/components'; export default function MyComponent() { return <Button>Click Me!</Button>; }

버튼의 경우 Gutenberg 구성 요소를 사용할 필요가 없고 대신 <button> 태그를 직접 사용하는 것이 의아할 수 있습니다. 그리고 당신이 옳을 것입니다.

그러나 Gutenberg Button 을 사용하면 버튼이 WordPress 인터페이스의 다른 버튼과 동일한 CSS 스타일을 갖게 됩니다. 또한 구성 요소와 스타일이 업데이트되면 WordPress의 거의 모든 새 버전에서 발생하는 일이므로 개발자는 아무 것도 할 필요가 없습니다. 구텐베르크 Button 업데이트에 대한 책임은 귀하에게 있지 않습니다. 자신의 버튼을 사용했다면 그것은 당신이 돌봐야 할 것입니다.

기존 구텐베르크 구성 요소를 재사용하려면 이 구성 요소가 존재하는지 확인하고 @wordpress/components 패키지를 통해 코드로 가져와야 합니다. 위의 코드 조각에서 볼 수 있듯이 이 패키지에서 Button 구성 요소를 가져왔습니다. 그리고 프로젝트 내에서 패키지를 사용할 수 있게 하려면 터미널에서 npm install @wordpress/components 명령을 사용하여 패키지를 설치해야 합니다. 그러나 이것은 David가 그의 게시물에서 이미 설명했기 때문에 다시 다루지 않겠습니다.

명심해야 할 점은 이러한 구성 요소가 WordPress 스타일을 사용하려면 PHP 함수 wp_enqueue_style 을 사용하여 WordPress에 큐에 넣을 때 wp-components 를 CSS 스타일 파일의 종속성으로 설정해야 한다는 것입니다.

Gutenberg에서 제공하는 React 구성 요소가 요구 사항을 충족하지 않는 한 바퀴를 재발명하여 사용하지 마십시오. 기존 구성 요소를 재사용하는 이점은 자체 구성 요소를 사용하는 것보다 훨씬 큽니다.

구텐베르크의 React 구성 요소 스토리북

Gutenberg의 참신 중 하나는 Github에서 찾을 수 있는 Storybook입니다. Storybook은 개별적으로 구성 요소를 개발하고 볼 수 있는 샌드박스를 제공하는 오픈 소스 도구입니다. WordPress의 경우 무엇보다도 구성 요소에 대한 문서 역할을 합니다.

Gutenberg Storybook에 포함된 다양한 옵션 중에서 Playground 메뉴를 통해 블록 편집기를 사용해 볼 수 있습니다. 그러나 가장 흥미로운 옵션은 Gutenberg 구성 요소의 문서를 친숙한 방식으로 볼 수 있다는 것입니다.

구성 요소 메뉴를 열면 WordPress에서 @wordpress/components 패키지를 통해 제공하는 구성 요소 목록을 찾을 수 있습니다. 각 React 구성 요소를 탐색하고 전체 JavaScript 코드와 함께 사용 예를 볼 수 있습니다.

예를 들어, 다음 스크린샷에서는 버튼이 가질 수 있는 다양한 속성을 가진 Button 구성 요소의 예를 볼 수 있습니다. 그런 다음 스토리 탭에 전체 예제의 소스 코드가 있습니다.

또한 일부 특정 구성 요소에는 구성 요소의 속성을 수정하고 인터페이스에서 발생하는 변경 사항을 미리 볼 수 있는 노브 탭 내의 옵션이 포함되어 있습니다.

이러한 구성 요소 중 하나는 텍스트 필드를 추가하는 데 사용되는 TextControl 입니다. 다음 스크린샷에는 구성 요소의 레이블 을 숨기거나 레이블과 도움말의 텍스트를 변경하는 다양한 옵션이 있는 노브 탭이 있습니다. 따라서 구성 요소가 변경 사항에 따라 어떻게 보이는지 확인하고 React 인터페이스에서 사용 방법을 결정할 수 있습니다.

@wordpress/components 패키지의 모든 구성 요소가 스토리북에 완전한 문서가 있는 것은 아니므로 Github의 구성 요소 패키지 섹션으로 이동하여 Gutenberg에서 최신 버전의 React 구성 요소 상태를 확인해야 합니다.

하지만 구텐베르그 스토리북 문서화가 완성되면 개발자들에게 점점 더 흥미로워질 것이다. WordPress에 이러한 유형의 문서를 보유하는 것은 사치입니다. 그 유용성은 논할 수 없습니다.

구텐베르크의 React 구성 요소가 WordPress 개발에 제공할 수 있는 모든 것을 이미 보았습니다. 바퀴를 재발명하고 자신의 기본 구성 요소를 개발하는 대신 나머지 WordPress 인터페이스와 일관성을 유지하고 개발 및 유지 관리 시간을 절약하려면 먼저 구텐베르크의 React 구성 요소를 살펴보십시오. 소프트웨어 재사용은 WordPress 개발자로서 효율성을 높이는 열쇠입니다.

Unsplash에서 Morning Brew의 추천 이미지.