React와 Gutenberg 블록개발 (커스텀 블록 제작과 UI 확장)

한눈에 보기: 워드프레스의 블록 에디터(Gutenberg)는 React 기반으로 만들어져 있습니다. 따라서 맞춤형 블록이나 에디터 UI 확장을 위해서는 JSX 문법과 React 기본기를 알아두는 게 유리합니다. 이 글에서는 복잡한 React 전체가 아닌, 워드프레스 블록 개발에 필요한 핵심만 정리했습니다. 작은 커스텀 블록부터 시작해 사이드바·툴바 UI 확장까지 한 흐름으로 이해할 수 있습니다.

1. 왜 React가 워드프레스 블록에 필요한가

2. JSX와 블록 UI 구조 이해하기

3. 커스텀 블록 만들기

4. 에디터 UI 확장: 사이드바와 툴바

8. FAQ

10. 출처

1. 왜 React가 워드프레스 블록에 필요한가

Gutenberg는 React와 Redux 계열 라이브러리를 활용해 블록 단위 편집을 제공합니다. 즉, 글/페이지를 구성하는 UI가 전부 React 컴포넌트라는 뜻이에요. 따라서 새로운 블록을 추가하거나 기존 UI를 확장하려면 React 방식으로 코드를 작성해야 합니다. 다만, 워드프레스가 기본 틀을 다 제공하기 때문에 “React 기본 + JSX 문법”만 익히면 시작이 가능합니다.

핵심 요약: Gutenberg는 React 기반 → 커스텀 블록을 만들려면 React 필수.

2. JSX와 블록 UI 구조 이해하기

JSX는 HTML과 비슷한 문법으로 React 컴포넌트를 작성할 수 있게 해줍니다. 워드프레스에서는 블록 UI를 JSX로 표현하고, 속성과 상태를 props로 관리합니다. 예를 들어 단순한 버튼 블록은 아래처럼 작성됩니다:

registerBlockType('myplugin/button', {
  edit: () => <button className="wp-block-button">Click Me</button>,
  save: () => <button className="wp-block-button">Click Me</button>
});

edit 함수는 에디터 안의 모양, save 함수는 실제 저장되는 HTML 구조를 정의합니다.

핵심 요약: JSX는 블록 UI를 직관적으로 표현하는 핵심 문법.

3. 커스텀 블록 만들기

새로운 블록은 block.json과 함께 JS/JSX 파일을 작성해 등록합니다. block.json은 블록 이름, 아이콘, 속성 등을 선언하는 메타데이터 역할을 합니다. 기본 틀만 작성하면 워드프레스가 자동으로 에디터에 불러옵니다.

{
  "apiVersion": 2,
  "name": "myplugin/notice",
  "title": "알림 블록",
  "category": "widgets",
  "icon": "info",
  "editorScript": "file:./index.js"
}

핵심 요약: block.json은 블록의 신분증, index.js는 동작 로직.

4. 에디터 UI 확장: 사이드바와 툴바

React를 알면 블록 자체뿐 아니라 에디터 UI 확장도 가능합니다. 예를 들어 사이드바에 추가 설정을 넣거나, 블록 툴바에 버튼을 붙이는 거죠. 이는 @wordpress/plugins와 @wordpress/edit-post 패키지를 활용합니다.

예: 사이드바에 커스텀 패널 추가

import { registerPlugin } from '@wordpress/plugins';
import { PluginSidebar } from '@wordpress/edit-post';

registerPlugin('myplugin-sidebar', {
  render: () => (
    <PluginSidebar name="myplugin-sidebar" title="추가 옵션">
      <p>여기에 원하는 설정을 넣을 수 있습니다.</p>
    </PluginSidebar>
  )
});

핵심 요약: React 컴포넌트 등록만으로 에디터 UI 확장이 가능.

5. 데이터 관리와 wp.data

블록 에디터 내부 상태는 Redux 패턴의 wp.data로 관리됩니다. 예를 들어 현재 선택된 블록이나 문서 설정에 접근할 때 유용합니다. 하지만 복잡한 스토어 설계까지 몰라도 되고, “useSelect”와 “useDispatch” 정도만 알면 대부분 해결됩니다.

핵심 요약: wp.data는 블록 간 데이터 교환의 다리.

6. 보안과 REST API 연동

블록에서 서버 데이터를 가져올 때는 Fetch/REST API를 활용합니다. 이때 Nonce 검증으로 권한을 확인하고 JSON 데이터로 주고받습니다. React는 단순히 UI 표현을 맡고, 데이터는 워드프레스 API를 통해 처리합니다.

핵심 요약: React는 UI, REST는 데이터 → 역할 분리.

7. 성능과 유지보수

React 블록이 많아지면 코드 번들링과 최적화가 필요합니다. npm·webpack·Vite 같은 도구로 관리하며, 공통 컴포넌트를 나누면 유지보수가 쉬워집니다. 너무 깊이 들어갈 필요는 없고, “공식 @wordpress/scripts 패키지를 쓰면 된다” 정도만 기억하면 충분합니다.

핵심 요약: @wordpress/scripts 활용 → 복잡한 설정 최소화.

8. FAQ

Q. React 전체를 공부해야 하나요? 블록 제작에는 JSX와 props/state 개념만 알면 충분합니다. 나머지는 공식 핸드북 참고.
Q. jQuery로는 블록 못 만드나요? 기존 테마 유지보수에는 유용하지만, 블록 에디터 확장은 React 기반이라 jQuery로는 불가합니다.
Q. 블록 개발을 꼭 해야 하나요? 단순 사이트는 기본 블록과 플러그인으로 충분합니다. 직접 개발은 커스터마이징 수요가 클 때 필요합니다.