Creator 내의 DevLink

DevLink를 사용하면 Webflow Creator에서 직접 React 요소를 구성할 수 있습니다. 이제 작성자로서 귀하는 설계를 프로그래머에게 전달하는 보다 직접적인 접근 방식을 갖게 되었습니다. DevLink는 또한 CSS와 구성 요소 속성의 동기화를 용이하게 하여 프로그래머가 생산 준비가 된 React 구성 요소를 자동으로 받을 수 있도록 합니다.

중요한: 이 가이드에서는 Webflow Creator의 DevLink 특유의 UI를 설명합니다. DevLink의 코드 동기화를 활성화하고 활용하는 방법을 알아보려면 광범위한 내용을 참조하십시오. DevLink 개발자 documentation.

이 기사에서는 다음 내용을 다룹니다.

1. 제작자 및 프로그래머 워크플로를 위한 최적의 사례
2. 스타일링 추천
3. Webflow Creator의 DevLink 설정
4. 속성
5. 동적 소품
6. 컨테이너

제작자 및 프로그래머 워크플로를 위한 최적의 사례

프로그래머와 협력할 때 제작자는 자신이 수정한 구성 요소와 준비 시기에 대해 명시적으로 소통하는 것이 좋습니다. DevLink의 동기화는 전역 스타일과 기존 구성 요소를 덮어쓰므로 React에서 프로그래머의 노력이 지워질 수 있습니다.

이에 대한 해결 방법(예: 프로그래머가 새 동기화로 인해 가려지지 않고 업데이트하려는 경우 DevLink 디렉터리에서 구성 요소를 재배치)이 있지만 가장 좋은 방법은 작성자가 마지막 동기화 이후 수정된 구성 요소를 표시하는 것입니다. 이 시나리오에서는 제작자가 사이트 활동 로그를 활용하는 것이 도움이 될 수 있습니다.

스타일링 추천

요소의 스타일을 지정하는 동안 Body 요소에 스타일을 설정하는 대신 구성 요소 자체에 스타일을 적용해야 합니다. Body에 설정된 스타일은 React 구성 요소에 포함되지 않습니다.

Webflow Creator의 DevLink 설정

Webflow Creator의 구성 요소 패널에서 중요한 DevLink 지시문과 구성 코드를 찾을 수 있습니다. 여기에는 설치 지시문, React 프로젝트 구성, Webflow를 React 프로젝트와 동기화하는 내용이 포함됩니다. 프로그래머가 DevLink를 사용하여 Webflow를 React 프로젝트와 동기화하면 Webflow Creator에서 변경된 모든 내용이 코드에 나타납니다.

참조 모달에 액세스하려면 구성요소 패널 그리고 “를 선택하세요.구성 요소 내보내기패널 오른쪽 상단에 ' 아이콘이 표시됩니다.

속성

DevLink는 구성 요소 속성을 지원하므로 구성 요소 인스턴스에 고유한 값을 정의할 수 있습니다. 이는 애플리케이션에 내부 콘텐츠가 다양하거나 숨겨지는 반복 레이아웃 패턴이 있는 경우 유용합니다. 속성을 사용하면 구성 요소의 각 인스턴스에서 이 콘텐츠를 수정할 수 있는 유연성을 얻을 수 있습니다.

디자인하는 동안 구성 요소 인스턴스의 요소에 대한 속성을 정의할 수 있습니다. Webflow의 속성 명칭은 React 구성 요소의 속성 지정과도 일치합니다. 그런 다음 React 프로젝트에서 구성 요소 속성 값을 지정할 수 있습니다. 이를 통해 구성 요소 콘텐츠를 업데이트하는 데 더 큰 유연성이 제공됩니다. Webflow에서 그렇게 할 수 있습니다. 또는 React 프로젝트에서 직접.

중요한: DevLink는 단방향으로 작동하며 React 업데이트를 Webflow로 다시 전송하지 않습니다.

구성요소 속성 정의에 대해 자세히 알아보세요.

동적 소품

동적 소품 React 프로젝트에 적용하기 위해 Webflow의 구성 요소에 추가할 수 있는 DevLink의 특수 속성입니다. 동적 prop을 사용하면 사용자 정의된 onClick 핸들러와 같이 Webflow가 현재 기본적으로 지원하지 않는 구성 요소에 더 복잡한 속성을 통합할 수 있습니다.

중요한: 구성 요소에 동적 속성을 설정하기 전에 React에 익숙한 개인과 상담하는 것이 좋습니다.

Webflow의 기본 구성 요소 또는 구성 요소 인스턴스에 동적 속성을 할당할 수 있습니다. 이를 달성하려면 구성 요소를 수정하고 요소 설정 패널 > 데브링크 > 동적 소품을 클릭한 다음 속성에 연결하세요. Webflow의 속성 명칭은 React 프로젝트의 속성 이름과도 일치합니다.

React 프로젝트에서는 이벤트에서 기능(예: 상호 작용, 콘텐츠 수정, 스타일 조정)을 트리거하는 동적 소품을 설정할 수 있습니다. 동적 소품은 객체 값(예: 함수)을 허용합니다.

컨테이너

컨테이너는 구성 요소를 값으로 받아들이는 DevLink의 특수 속성입니다. 컨테이너를 사용하면 구성 요소 내부에 구성 요소를 포함할 수 있습니다. 이내에 귀하의 반응 프로젝트. 이는 Webflow에서 기본적으로 구성할 수 없는 맞춤형 React 구성 요소를 보유하고 있지만(예: 구성 요소가 타사 라이브러리에 의존하거나 사용자 정의 논리에 대한 지원이 필요한 경우) Webflow에서 만든 구성 요소에 중첩하고 싶을 때 유용합니다.

중요한: 컨테이너를 구축하기 전에 React 경험이 있는 개인에게 조언을 구할 것을 제안합니다.

구성 요소에 대한 컨테이너 속성을 구성하려면 구성 요소를 수정하고 요소 설정 패널 > 데브링크 > 컨테이너을 선택한 다음 이를 속성과 연결합니다.

이후 React 컴포넌트의 컨테이너 속성으로 컴포넌트를 옮길 수 있습니다. 예를 들어 로고 컴포넌트와 "logoSlot" 컨테이너 속성이 있는 Division 컴포넌트를 소유하고 있다면 다음과 같이 새길 수 있습니다. 로고슬롯 = { } 분할 구성 요소 안에 로고를 중첩합니다.