Puck에서 애플리케이션 상태 관리

Puck은 React용 오픈 소스 비주얼 편집기로, 차세대 페이지 빌더와 코드 없는 제품을 지원합니다. GitHub에서 별점을 주세요! ⭐️

---

Puck은 빠르게 성장하고 있으며 보는 것이 정말 즐거웠습니다! ? 모든 배경의 개발자들은 이 오픈 소스 시각적 편집기가 수행할 수 있는 작업의 한계를 넓히고 있습니다. 하지만 더 많은 사람들이 Puck에 빠져들면서 Discord 커뮤니티에는 한 가지 질문이 계속 올라오고 있습니다.

“Puck의 구성 요소 간에 데이터를 전달하거나 상태를 공유하려면 어떻게 해야 하나요?”

즉, 한 구성 요소가 다른 구성 요소의 변경 사항에 반응하도록 하려면 어떻게 해야 할까요? 예를 들어 검색 입력이 포함된 DropZone 구성 요소를 생성하여 그 안에 드롭된 모든 목록이 해당 값을 읽을 수 있도록 할 수 있습니다.

처음에는 Puck에 내장된 마법으로 인해 Puck이 독특한 방식으로 상태를 처리한다고 생각할 수도 있습니다. 하지만 문제는 이렇습니다. Puck은 React일 뿐이며 여기에 전달하는 구성 요소도 마찬가지입니다. 즉, 일반적으로 구성 요소 간 데이터를 관리하고 공유하는 데 사용하는 모든 상태 라이브러리나 도구를 사용할 수 있습니다. 이번 글에서는 간단하게 설명하고 Context를 사용하여 이 문제를 해결하는 방법을 알려드리겠습니다.

시작하기 전에: Puck과 Puck의 작동 방식에 대한 기본적인 이해가 있다고 가정하겠습니다. 여기에 처음 오신 분이라도 괜찮습니다. 따라오셔도 됩니다! 하지만 기본 사항에 익숙해지려면 먼저 시작 가이드를 확인하는 것이 좋습니다.

프로젝트 설정

쉽게 진행하기 위해 Puck이 사전 설치되어 바로 사용할 수 있는 기본 React 프로젝트를 GitHub에 준비했습니다. 터미널에서 다음 명령을 실행하여 복제하고 설치합니다.

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

이미 기존 프로젝트를 진행 중이신가요? 전혀 문제 없습니다! NPM을 사용하여 Puck을 종속성으로 간단히 설치할 수 있습니다.

npm i @measured/puck --save

Next.js 또는 Remix와 같은 프레임워크를 사용하는 경우 Puck은 설정 프로세스를 원활하게 만드는 공식 레시피를 제공합니다.

이 튜토리얼에서는 작업을 간단하게 유지하기 위해 GitHub 저장소를 복제했다고 가정합니다. 즉, 개념과 단계는 모든 설정에 적용됩니다. 필요에 따라 프로젝트 구조에 맞게 파일 이름을 업데이트하면 됩니다.

퍽 구성

프로젝트 준비가 완료되면 다음 단계는 Puck을 구성하는 것입니다. src/App.jsx 파일을 열고 해당 내용을 아래 코드로 바꿉니다. 이렇게 하면 두 구성요소를 드래그 앤 드롭하기 위한 기본 구성으로 Puck이 설정됩니다.

• 사용자를 환영하고 다른 구성 요소를 중첩하기 위한 DropZone을 포함하는 대시보드 구성 요소
• 대시보드 내부에 기사 목록을 표시하는 ArticleList 구성요소

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

좋아요! 이제 기본 설정이 완료되었습니다. 다음으로 편집기에 공유 상태를 추가하는 방법을 살펴보겠습니다.

컨텍스트 추가

React Context는 편집기 내부와 외부 모두에서 모든 구성 요소에 걸쳐 데이터를 공유하고 관리하는 간단한 방법을 제공하므로 우리 문제에 대한 완벽한 솔루션입니다. 필요할 때마다 액세스할 수 있는 "전역 상태"를 생성하므로 선택한 테마나 로그인한 사용자 등 Puck 외부에서 데이터를 가져오거나 Puck 구성 요소 간에 데이터를 공유해야 하는 시나리오에 이상적입니다.

이 가이드에서는 Puck 내 React Context의 두 가지 일반적인 사용 사례를 안내하겠습니다.

1. Puck 외부에 저장된 데이터 액세스: 외부에 로그인한 사용자의 데이터가 포함된 컨텍스트를 설정하는 것부터 시작하겠습니다. 그런 다음 Puck 구성 요소 내에서 액세스합니다.
2. 중첩 구성요소에 데이터 전달: 다음으로 대시보드 내에서 검색어 컨텍스트를 설정하겠습니다. 이를 통해 사용자의 검색 쿼리를 캡처하고 이를 컨텍스트에 저장한 다음 ArticleList 구성 요소에 전달할 수 있습니다. 목표는 사용자의 쿼리를 기반으로 기사 목록을 필터링하여 상위 및 하위 Puck 구성 요소 간에 데이터를 전달하는 방법을 보여주는 것입니다.

1단계: Puck 외부 컨텍스트 정의

Puck에서 컨텍스트를 설정하는 것은 모든 React 앱과 동일한 패턴을 따릅니다. 공유 상태를 정의 및 관리하고 이를 상위 구성 요소로 감싸고 앱에서 필요할 때마다 상태에 액세스하거나 업데이트하는 컨텍스트 공급자를 만듭니다.

사용자 데이터에 대한 새 컨텍스트를 생성하는 것부터 시작하세요. 이 컨텍스트에는 사용자 개체와 사용자 상태를 업데이트하는 함수가 모두 포함됩니다.

npm i @measured/puck --save

2단계: Puck 외부에서 컨텍스트 제공자 생성

다음으로 Puck 편집기를 래핑할 UserProvider 구성 요소를 만듭니다. 이 공급자는 사용자 상태를 관리하고 모든 어린이가 사용할 수 있도록 합니다.

간결함을 위해 더미 사용자와 useState에서 반환된 setter 함수를 사용하고 있습니다.

// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
  render: () => {
    return (
      <div>



<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

3단계: 공급자를 Puck과 통합

제공자를 Puck 편집기와 통합하려면 편집기를 UserProvider로 래핑하기만 하면 됩니다. UserProvider를 구성 요소 트리(인덱스 파일 등)의 편집기 위 아무 곳에나 배치하면 제대로 작동합니다. 이 작업을 완료하면 모든 편집기 구성 요소가 컨텍스트에 액세스할 수 있습니다!

git clone https://github.com/FedericoBonel/basic-puck-app
cd ./basic-puck-app
npm install

4단계: Puck 구성 요소에서 컨텍스트 사용

이제 모든 Puck 구성 요소에서 UserContext에 액세스할 수 있습니다. 사용 사례 예에 따라 로그인한 사용자에게는 "환영" 메시지를 표시하고 손님에게는 "일반 환영" 메시지를 표시하도록 대시보드 구성 요소를 업데이트해 보겠습니다.

npm i @measured/puck --save

7단계: Puck 구성 요소에서 컨텍스트 사용

이제 컨텍스트 공급자 내부에 있는 구성 요소에서 컨텍스트를 읽어보겠습니다. 우리의 경우 사용자가 DropZone을 통해 대시보드 내에 중첩한 ArticleList 구성 요소의 컨텍스트를 사용합니다. 이를 통해 ArticleList는 검색 쿼리의 변경 사항에 응답하고 그에 따라 업데이트할 수 있습니다.

// App.jsx
import { Puck, DropZone } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for your draggable components
// Ideally you would pull these out into their own files
const dashboardConfig = {
  render: () => {
    return (
      <div>



<p>Once you’ve updated the file, start the application in development mode, and navigate to http://localhost:5173 to verify everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

이제 편집기로 가서 대시보드 구성 요소를 캔버스로 드래그하고 그 안에 ArticleList를 놓은 다음 초기 쿼리 필드를 수정하면 목록이 쿼리를 기반으로 기사를 동적으로 필터링하는 것을 볼 수 있습니다. ?

다른 콘텐츠가 포함된 여러 목록 구성 요소가 동일한 쿼리 컨텍스트를 재사용하도록 하여 이 설정을 확장할 수도 있습니다.

? 그리고 그게 다야! 이제 중첩된 Puck 구성 요소 간에 상태를 공유했습니다. ?

React Context 사용의 장단점

✅ 장점:

• Puck 내부 및 외부 모두에서 구성 요소 간에 상태를 공유하기 위한 강력한 솔루션을 제공합니다
• 기존 React 패턴 및 구성요소와 원활하게 통합됩니다
• 복잡한 로직과 상태 처리 가능
• React Context가 React와 함께 제공되므로 외부 종속성이 없습니다

❌단점:

• 모든 구독자가 다시 렌더링해야 하므로 대규모 구성 요소 트리 상단에서 상태를 자주 업데이트하면 성능이 저하될 수 있습니다
• 여러 컨텍스트 제공자를 관리할 때 디버깅이 더 어려워질 수 있습니다

더 나아가

편집기의 복잡성에 따라 Puck의 공유 상태 관리를 개선할 수 있는 여러 가지 방법이 있습니다.

• 컨텍스트 사용 최적화 - 성능 문제나 불필요한 다시 렌더링이 발견되면 컨텍스트를 더 작고 집중된 컨텍스트로 분할하는 것이 좋습니다. 이를 통해 구성요소는 필요한 상태 부분만 구독하여 재렌더링을 최소화할 수 있습니다.
• 상태 라이브러리 통합 - 여러 개의 공유 상태와 더 복잡한 로직이 있는 경우 React Context를 넘어 선호하는 상태 라이브러리를 사용할 수 있습니다. Redux, Zustand 또는 프로젝트에서 이미 사용하고 있는 다른 라이브러리이든 이를 통해 복잡한 상태 관리를 단순화하고 렌더링 성능을 향상시킬 수 있습니다.
• 서버측 상태 활용 - 애플리케이션이 서버에서 가져온 데이터에 크게 의존하는 경우 TanStack Query 또는 SWR과 같은 라이브러리 사용을 고려해 보세요. 이러한 라이브러리는 캐싱, 다시 가져오기 및 동기화를 관리하므로 복잡한 공유 클라이언트 측 상태의 필요성이 줄어듭니다.

Puck을 사용하여 더욱 스마트하게 구축할 차례인가요?

Puck의 공유 상태 관리를 한 단계 더 발전시키면 동적인 반응형 페이지 빌더를 구축할 수 있는 가능성의 세계가 열립니다. 이러한 전략을 사용하여 여러분이 구축할 독특하고 강력한 앱을 보게 되어 기쁩니다.

이 기사를 통해 무언가를 만들려는 영감을 얻었거나 Puck에 대해 질문이 있거나 기여하고 싶다면 참여 방법은 다음과 같습니다.

• ? GitHub의 Star Puck을 통해 여러분의 지지를 보여주고 다른 사람들이 탐색하도록 영감을 주세요.
• ? Discord 커뮤니티에 가입하여 소통하고, 배우고, 협력하세요.
• ? 미리보기, 업데이트 및 팁을 보려면 X 및 Bluesky를 팔로우하세요.
• ? 빌드를 강화하는 고급 기술에 대한 문서를 살펴보세요.

Puck의 미래와 노코드 혁신이 여러분의 손에 달려 있습니다. 오늘부터 구축을 시작하고 무엇이 가능한지 함께 재정의해 봅시다! ?