VAC Debugger - 사용자 프리셋

Park U-yeong·2022년 12월 2일
0

VAC Debugger

목록 보기
5/7
post-thumbnail

VAC 프리셋

<VAC> 설정이 반복되는 경우 사용자 프리셋을 만들어 사용할 수 있습니다.

withPreset

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}
/>

마치며

다음편은 커스텀 이벤트에 대해서 설명합니다.

profile
What 12 9oing on?

0개의 댓글