사용법
VAC Debugger Usage 내용을 기반으로 VAC Debugger의 옵션들을 설명합니다.
Props 네이밍 규칙
use~:<VAC>에서 리스트나 입력을 처리할 때 필요한 설정 값 지정on~:<VAC>의 입력 처리에 필요한 이벤트 지정- 그 외:
<VAC>옵션
속성
name
[type] string
<VAC>를 구분하기 위해 표시하는 이름입니다.
<VAC name={"Sample"} />data 속성이 설정되어 있는 상태에서 name 속성을 생략되면 이름 부분이 숨겨집니다.
<VAC data={"No name was entered"} />data
[type] any
<VAC>에서 테스트할 VAC의 Props Object입니다.
<VAC name="Props: data" data={{ value: "test value" }} />Props Object에 함수가 선언되어 있으면 함수를 호출하는 버튼이 생성됩니다.
<VAC
name="Props: data"
data={{
value: "test value",
onDelete: (event) => console.log("delete!!"),
}}
/>data 속성에 전달하는 값이 Object가 아니면 출력 패널에 log 형식으로 노출됩니다.
<VAC name="Props: data" data={'string'} />
<VAC data={123} />
<VAC data={null} />
<VAC data={false} />
<VAC data={[1, 2, 3]} />
<VAC data={() => console.log('function!')} />hidden
[type] boolean
<VAC>를 노출하지 않습니다. (숨김 처리가 아니라 렌더링 자체를 하지 않음)
<VAC name="Props: hidden" data={'string'} hidden />
// or
<VAC name="Props: hidden" data={'string'} hidden={true} />trace
[type] string [version] ^0.1.0
<VAC> 출력 패널에 노출하려는 Props Object의 속성만 설정합니다. 속성이 둘 이상이면 쉼표나 공백으로 구분합니다.
Props Object에 속성이 너무 많아서 확인하고 싶은 값을 보기 어려운 경우 사용할 수 있습니다.
<VAC
name="Props: trace"
// 노출하려는 속성명 설정
trace="propA, propC"
data={{ propA: "test value", propB: 12345, propC: true }}
/>listTrace
[type] string [version] ^0.1.0
<VAC>를 리스트 모드로 사용하는 경우 배열에서 노출하려는 속성만 설정합니다. 사용법은 trace와 동일합니다.
<VAC
name="Props: listTrace"
useList="list"
// 노출하려는 속성명 설정
trace="propB"
// 노출하려는 리스트의 속성명 설정
listTrace="propA, propC"
data={{
// List props
propA: "test value",
propB: 12345,
propC: true,
// List item props
list: [
{ propA: "test value", propB: 12345, propC: true },
{ propA: "test value", propB: 12345, propC: true },
{ propA: "test value", propB: 12345, propC: true },
],
}}
/>maxWidth, maxHeight
[type] number | string
<VAC>의 최대 사이즈를 제한합니다. 표시할 내용이 설정한 사이즈보다 클 경우 스크롤이 활성화 됩니다.
<VAC name="Props: maxWidth" data={'string'} maxWidth="100" />
// or
<VAC name="Props: maxHeight" data={'string'} maxHeight={100} />useList
[type] string
<VAC>에서 리스트 형태로 표시할 배열의 Props Object 속성명입니다. 이 속성을 설정하면 리스트 모드로 출력됩니다.
<VAC
name="Props: List"
useList="exampleList"
data={{
exampleList: [
{
value: "test value 1",
onDelete: (event) => console.log("delete 1"),
},
{
value: "test value 2",
onDelete: (event) => console.log("delete 2"),
},
{
value: "test value 3",
onDelete: (event) => console.log("delete 3"),
},
],
}}
/>useList를 설정하지 않으면 배열이 일반 모드로 출력되며, 함수가 선언되어 있는 경우는 표시되지 않습니다.
자세한 사용법은 VAC Debugger - 배열 처리를 참고합니다.
useEach
[type] string
배열 데이터를 요소별로 가공하는 함수의 Props Object 속성명입니다.
<VAC
name="Props: List"
useList="exampleList"
useEach="exampleEach"
data={{
// each (index and element of exampleList)
exampleEach: (data, index) => ({
label: data.value,
onCheck: (event) => console.log("check", index, data),
}),
// Raw list
exampleList: [
{
value: "test value 1",
},
{
value: "test value 2",
},
{
value: "test value 3",
},
],
}}
/>자세한 사용법은 VAC Debugger - 배열 처리를 참고합니다.
useName
[type] string [version] ^0.3.0
인풋창이나 버튼 요소의 name 속성에 사용할 Props Object 속성명입니다.
<VAC
useName="key"
onChange="onChange"
data={{
key: "testInput",
onChange: (event) => {
// Output: testInput - {event.target.value}
console.log(event.target.name, "-", event.target.value);
},
}}
/>useValue, useDefaultValue
[type] string
입력창의 value나 defaultValue에 설정할 Props Object 속성명입니다. 이 속성을 설정하면 입력창이 활성화 됩니다.
<VAC
name="Props: Input"
useValue="value"
data={{
value: "test value",
}}
/>자세한 사용법은 VAC Debugger - 입력 처리를 참고합니다.
접두사가 on~으로 시작하는 속성
[type] string
입력창의 이벤트에 바인딩할 함수의 Props Object 속성명입니다. 입력창에 사용가능한 이벤트명이어야 합니다. 해당 속성이 유효하면 입력창이 활성화 됩니다.
<VAC
name="Props: Event Callback"
// 지정한 함수만 입력창에 바인딩
onChange="onChange"
onKeyUp="onKeyUp"
data={{
// Used as props of textarea
onChange: (event) => console.log("change!"),
onKeyUp: (event) => console.log("key up!"),
// Not used as props of textarea
onKeyDown: (event) => console.log("key down!"),
onSend: (event) => console.log("send!"),
}}
/>자세한 사용법은 VAC Debugger - 입력 처리를 참고합니다.
customEvent
[type] { [key:string]: Function }
VAC에서 관리할 가상의 이벤트를 정의합니다. Props Object에 동일한 이름의 함수가 있으면 customEvent 속성에 선언된 함수를 호출하는 버튼이 활성화 됩니다.
<VAC
name="Props: Custom Event"
customEvent={{
// Handler called when 'increase' button is clicked.
// callback: data.increase.
// data: data property of VAC Debugger
increase: (event, callback, data) => callback(data.value + 1),
}}
data={{
value: 1,
increase: (result) => console.log(result),
onDecrease: (event) => console.log("decrease!"),
}}
/>자세한 사용법은 VAC Debugger - 사용자 이벤트를 참고합니다.
컴포넌트
VACList
리스트용 <VAC> 프리셋
자세한 사용법은 VAC Debugger - 배열 처리를 참고합니다.
VACInput
입력창용 <VAC> 프리셋
자세한 사용법은 VAC Debugger - 입력 처리를 참고합니다.
함수
withPreset
[type] (string, VACProps) => VAC [version] ^1.2.0
속성을 미리 설정한 <VAC>를 생성하는 함수
자세한 사용법은 VAC Debugger - 사용자 프리셋를 참고합니다.
