VAC Debugger(이하 <VAC>
)를 활용하여 입력 처리를 테스트할 수 있습니다.
- 관련 속성:
useName
,useValue
,useDefaultValue
- 관련 이벤트 속성:
onChange
,onFocus
,onBlur
,onSelect
,onKeyDown
,onKeyUp
,onKeyPress
등 textarea에 바인딩 가능한 이벤트명- 관련 프리셋:
<VACInput>
<VAC>
의 입력창을 활성화 하려면 useValue
나 useDefaultValue
속성을 사용합니다.
이 속성에는 입력창의 value
와 defaultValue
에 설정할 속성명을 문자열로 전달합니다.
useValue
와 useDefaultValue
는 동시에 사용하지 않고 둘 중 하나만 사용합니다.
import { VAC } from 'react-vac';
function ViewComponent() {
const props = {
text: '입력 값입니다.'
};
// useDefaultValue 속성에 사용할 props 이름을 전달
return <VAC name="입력 테스트" data={props} useDefaultValue="text" />;
}
입력창에 설정되는 props 속성들은
<VAC>
의[props]
출력 패널에 표시되지 않습니다.
입력과 관련된 이벤트에 할당하는 속성을 사용하는 경우도 <VAC>
입력창이 활성화 됩니다.
이벤트 속성에 할당할 함수의 속성명을 문자열로 전달합니다.
import { VAC } from 'react-vac';
function ViewComponent() {
const props = {
onChangeInput: (e) => console.log(e.target.value),
onKeyDownInput: (e) => console.log(e.key)
};
// 이벤트 지정 속성에 사용할 props 이름을 전달
return (
<VAC
name="입력 테스트"
data={props}
onChange="onChangeInput"
onKeyDown="onKeyDownInput"
/>
);
}
<VAC>
의 속성을 설정하면 입력창이 활성화 되는 이벤트는 textarea에 사용 가능한 모든 이벤트입니다.
useValue
를 사용하여 입력창의 값을 지정하는 경우는 onChange
이벤트를 통해서 해당 값을 갱신해야합니다.
그렇지 않으면 입력창에 전달하는 값이 변하지 않기 때문에 입력창의 내용도 갱신되지 않습니다.
import { useState } from 'react';
import { VAC } from 'react-vac';
function ViewComponent() {
// 입력창에 설정할 value
const [value, setValue] = useState('');
const props = {
value,
// 입력창에 입력한 내용을 value에 갱신
onChange: (e) => setValue(e.target.value),
// 입력창 값 사용
onClick: (e) => console.log(value)
};
// value, onChange는 <VAC> 입력창에 직접 적용
// onClick은 입력창에 적용하는 이벤트가 아니어서 테스트 버튼이 생성 됨
// 참고로 onChange도 속성을 지정하지 않으면 테스트 버튼이 생성됨
return (
<VAC
name="입력 테스트"
data={props}
useValue="value"
onChange="onChange"
/>
);
}
<VACInput>
은 입력창에 설정할 속성들이 미리 지정되어 있는 프리셋 <VAC>
입니다.
따라서 Props Object의 속성명을 지정된 형태로 사용하면 별도로 설정할 필요가 없습니다.
import {VAC, VACInput} from 'react-vac';
<VACInput />
// 위와 동일한 설정
<VAC
useName="name"
useValue="value"
useDefaultValue="defaultValue"
onChange="onChange"
onFocus="onFocus"
onBlur="onBlur"
onSelect="onSelect"
onKeyDown="onKeyDown"
onKeyUp="onKeyUp"
onKeyPress="onKeyPress"
/>
실제 구현한 예제는 다음과 같습니다.
import { useState } from 'react';
import { VAC } from 'react-vac';
function ViewComponent() {
const [value, setValue] = useState('');
const props = {
value,
onChange: (e) => setValue(e.target.value),
onClick: (e) => console.log(value)
};
// <VACInput> 사용시 useValue, onChange 설정 생략
return <VACInput name="입력 테스트" data={props} />;
// <VAC> 사용시 useValue, onChange 설정 추가
// return (
// <VAC
// name="입력 테스트"
// data={props}
// useValue="value"
//
// />
// );
}
다음편은 사용자가 직접 프리셋을 만드는 방법에 대해서 설명합니다.