<VAC>
설정이 반복되는 경우 사용자 프리셋을 만들어 사용할 수 있습니다.
withPreset
은 미리 설정된 속성을 적용한 <VAC>
를 반환하는 HOC를 만들수 있도록 해주는 함수입니다.
withPreset
은 2개의 파라미터를 가집니다.
withPreset(name, options);
name
: 프리셋 이름으로,<VAC>
에서 이름이 출력되는 부분에 접두사로 적용됩니다.options
: 미리 설정할<VAC>
의 속성입니다.
먼저 사용자 프리셋 모듈을 만듭니다.
// ./vac-preset.jsx
import { withPreset } from 'react-vac';
/*
<VAC
useList="datas"
useEach="getProps"
maxHeight={150}
/>
*/
export const VACMyList withPreset("@MyList", {
useList: "datas",
useEach: "getProp",
maxHeight: 150
});
프리셋이 필요한 모듈에서 해당 모듈을 사용합니다.
import { VACMyList } from './vac-preset';
function View() {
const props = {
datas: [1, 2, 3, 4, 5, 6],
getProps: (num, index) => ({ value: num })
};
// 사용자 프리셋 적용
return <VACMyList name="목록 테스트" data={props} />;
}
위 예제에서 <VACMyList>
프리셋은 아래 설정과 동일합니다.
<VAC
name="목록 테스트"
data={props}
useList="datas"
useEach="getProps"
maxHeight={150}
/>
다음편은 커스텀 이벤트에 대해서 설명합니다.