기본정보

Boilerplate repo에서 느끼셨겠지만 Merge는 JSX preset을 모든 컴포넌트의 preset 하위 디렉토리에 저장해야합니다. 그 이유는? Preset은 모든 컴포넌트의 초기 설정을 렌더링하는 데 사용됩니다. Merge는 어떤 속성의 구성(child 포함)을 기본적으로 렌더링할지 알아야 합니다. 이 구성은 사용자나 팀의 누군가가 UXPin 에디터 캔버스로 컴포넌트를 끌어서 놓을 때 기본적으로 렌더링됩니다.

일반적인 preset은 다음과 같습니다.

import React from 'react';
import Button from '../Button';

export default (
    <Button
        uxpId="button1"
        icon={<Icon icon='TickerSvg' size='s' />}
        mode="filled"
        size="s"
        stretched
        type="error"
    >
        Merge!
    </Button>
);

파일의 시작 부분에는 React 라이브러리와 preset에서 표현하고자 하는 모든 컴포넌트를 가져와야 합니다. Preset의 export default() 부분에, 컴포넌트의 원하고자 하는 디폴트 구성을 나타내는 JSX 코드를 배치합니다. 모든 컴포넌트의 JSX 표현에는 일반 속성 설정과는 별도로 고유한 UXPin ID 속성 uxpId이 있어야 합니다. uxpId를 사용하면 Merge가 모든 컴포넌트를 적절하게 렌더링하고 컴포넌트의 재정의된 내용를 추적할 수 있습니다 (향후 발생할 경우).

ID 및 네스트된 컴포넌트 (Nested Components)

Merge의 JSX preset은 컴포넌트의 복잡한 네스트 구조로 표현됩니다. 이 경우 모든 uxpId 속성이 고유 값을 유지해야 함을 기억하는 것이 매우 중요합니다. 특정 preset에서는 두 컴포넌트가 동일한 uxpId를 가질 수 없습니다. 그 외에도 네스트 구조의 preset을 만드는 것은 React.js의 컴포넌트에서 JSX 코드를 구성하는 것과 같은 방식으로 작동합니다. 모든 컴포넌트를 가져와 export default() 지시문으로 전체 구조를 만들어야 합니다.

import React from 'react';
import SelectItem from '../../SelectItem/SelectItem';
import Select from '../Select';

export default (
  <Select uxpId="select1">
    <SelectItem uxpId="select.item.1">Option1</SelectItem>
    <SelectItem uxpId="select.item.2">Option2</SelectItem>
    <SelectItem uxpId="select.item.3">Option3</SelectItem>
  </Select>
);

컴포넌트의 uxpId 이름을 결정할 때 컴포넌트가 수행하는 역할을 고려하십시오. 앞으로는 하나의 네스트 컴포넌트를 자동으로 다른 네스트 컴포넌트로 바꾸고 싶을 수도 있습니다. (예를 들어, Button을 더이상 이용 안하고 새로운 ButtonNew로 대체할 경우) 이러한 경우, 같은 uxpId를 유지하는 것으로, Merge 는 모든 디자인을 새로운 컴포넌트로 자동적으로 갱신할 수 있습니다.

재정의 (Overrides)

Preset의 코드 변경은 UXPin 에디터의 UXPin 디자인시스템 라이브러리에 자동으로 반영됩니다. UXPin 에디터에서 사용자가 컴포넌트의 속성을 변경해놓지 않는 한 Merge는 모든 속성을 변경합니다. 이러한 변경은 재정의 (override)로 취급되며 그대로 유지됩니다. 이 예를 살펴 보겠습니다.

https://uxpincommunity.cdn.prismic.io/uxpincommunity%2F5e8714e6-881b-4e02-b89a-eac64f19519b_merge_button_comparison.mp4

처음에는 버튼의 디폴트 preset은 다음과 같습니다.

import React from 'react';
import Button from '../Button';

export default (
  <Button
    uxpId="action1"
    size="small"
    variant="contained"
    color="primary"
    fullWidth
  >
    Click me
  </Button>
);

사용자가 이 요소를 UXPin 캔버스로 드래그하고 UXPin 인터페이스에서 속성의 크기를 large로 변경하고 색상을 secondary로 변경했습니다. 이후에 디자인시스템 팀의 결정에 따라 Button의 기본 preset이 다음과 같이 변경되었다고 가정합니다.

import React from 'react';
import Button from '../Select';

export default (
  <Button
    uxpId="action1"
    size="medium"
    variant="contained"
    color="primary"
    fullWidth
  >
    Click me
  </Button>
);

이 React.js 버튼을 사용하여 UXPin 에디터에서 만든 디자인은 어떻게 될까요? 아무 변화도 없습니다. 변경된 속성은 이미 사용자가 재정의(override)를 했습니다. Merge는 이러한 변경 사항을 저장하고 디자인을 유지했습니다.

그럼, 기본 레이블도 변경 되었다고 가정해 봅시다. 이 속성은 사용자가 아직 재정의 (override)하지 않습니다. 무슨 일이 일어날까요? Merge는 사용자의 프로젝트를 업데이트합니다.