VAC Debugger - 입력 처리

입력 테스트

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

<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"
  //    
  //  />
  // );
}

예제보기

마치며

다음편은 사용자가 직접 프리셋을 만드는 방법에 대해서 설명합니다.