코멘트로 컴포넌트에 표시하기

컴포넌트의 속성은 class/function의 디폴트 내보내기를 기반으로 순서화됩니다. 컴포넌트의 내보내기가 자신의 prop을 노출하는 class/function가 아닌 다른 함수에 의해 wrap되는 경우 순서화할 수 없습니다.

export default withAppProvider<Props>()(Button);

위 예제의 Button 컴포넌트에서는 속성을 직렬화할 수 없으며, 궁극적으로 Properties 패널을 표시할 수 없습니다. 이 방법을 처리하려면 이 컴포넌트를 다루는 JSDoc 코멘트을 추가해야 합니다.

위의 경우에 대한 해결책은 class/function 앞에 컴포넌트를 선언하는 JSDoc 코멘트인 @uxpincomponent를 추가하는 것입니다.

/**
 * @uxpincomponent
 */export class Button extends React.PureComponent {
// ...
}

꼭 class/function 앞에 JSDoc 코멘트 @uxpincomponent를 추가하여야 합니다.

네임스페이스 컴포넌트 (Namespaced Components)

라이브러리에서는 네스트된 컴포넌트 (nested components)를 사용할 수 있습니다. 이것은, 컴포넌트가 다른 컴포넌트를 포함하는 것을 의미합니다. 아래와 같이 사용합니다.

import Autocomplete from '../Autocomplete';
 
const textField = (
  <Autocomplete.ComboBox.TextField
    onChange={this.updateText}
    label="Tags"
    value={this.state.inputText}
    placeholder="Vintage, cotton, summer"
  />
);
 
export default (
  <Autocomplete
    allowMultiple
    textField={textField}
    listTitle="Suggested Tags"
  />
);

여기에는 세 가지 레벨의 컴포넌트가 있습니다.

• 최상위 컴포넌트: Autocomplete
• 두 번째 레벨 컴포넌트: ComboBox
• 세 번째 레벨 컴포넌트: TextField

이 접근법을 처리하려면 컴포넌트에서 네임스페이스 (namespace)를 선언해야 합니다.

네임스페이스 컴포넌트 (namespaced components) 선언

컴포넌트에서 네임스페이스를 선언하려면 JSDoc 코멘트인 @uxpinnamespace를 사용하여 상위 컴포넌트의 이름을 선언합니다. 앞의 예를 되돌아 보면 아래와 같이 ComboBox와 TextField같은 컴포넌트 안에 네임스페이스를 선언해야 합니다.

ComboBox.jsx

/**
 * @uxpinnamespace Autocomplete
 */export class ComboBox extends React.PureComponent {
// ...
}