Puck 0.19: Slots API 및 성능 개선

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, UI/UX 엔지니어, React 프레임워크 사용자
• 중급~고급 수준의 기술적 이해를 요구

핵심 요약

• Slots API는 DropZones 대체 API로, defaultProps 및 resolveData를 활용한 컴포넌트 중첩 기능 제공
• 성능 개선: HeadingBlock 삽입/삭제/변경 시 최대 91%의 렌더링 속도 향상
• metadata API를 통해 모든 컴포넌트에 데이터 주입 가능

섹션별 세부 요약

1. Slots API 소개

• DropZones 대체 API로, type: "slot" 필드를 사용해 컴포넌트 중첩 가능
• resolveData 및 defaultProps를 통해 프로그래밍 방식으로 컴포넌트 구성 가능
• ComponentData 배열 형식으로 슬롯 내 컴포넌트 데이터 저장 (예: {"type":"Flexbox","props":{"items":[{"type":"Header","props":{"title":"Nested header"}}]}})

2. 성능 향상

• HeadingBlock 관련 작업에서 렌더링 시간 63~91% 감소
• usePuck 및 useGetPuck의 selector 기능으로 불필요한 리렌더링 방지

3. metadata API

• metadata 객체를 통해 usePuck 외부에서 데이터 주입 가능 (예: metadata={pageId: "1234"})
• resolveData에서 metadata 파라미터를 활용한 데이터 동적 처리

4. 새로운 유틸리티 및 기능

• walkTree: 전체 데이터 트리 내 슬롯 재귀적 탐색 및 수정
• getItemBySelector, getItemById, getSelectorForId: 슬롯 내 컴포넌트 데이터 추출
• resolveData에 trigger 파라미터 추가 (예: "insert", "replace", "force")

결론

• Slots API 도입은 중첩 컴포넌트 처리의 유연성과 성능 향상에 기여
• 성능 개선을 위해 usePuck의 selector 기능 활용 권장
• DropZones에서 Slots로의 전환 시 업그레이드 가이드 참조 필수