VAC Debugger - 사용자 이벤트

이벤트 바인딩

이벤트에 callback 함수를 바인딩 할 때 보통 아래와 같이 두가지 방식 중 하나를 사용하게 됩니다.

// Callback 함수를 직접 바인딩
const onClick = (e) => {
  // 클릭에 대한 View 로직
  console.log('클릭');
};

<button onClick={onClick}>버튼<button>

// Handler 함수를 호출
const clickHandler = (value) => {
  // 클릭에 대한 View 로직
  console.log(value);
};

<button onClick={(e) => clickHandler('클릭')}>버튼<button>

VAC 패턴에서 VAC에 전달하는 함수는 이벤트에 직접 바인딩하는 callback 함수를 사용하는 것을 권장합니다.

하지만 부득이한 상황에서 handler 함수를 전달하는 경우 <VAC>의 customEvent 속성을 사용해 handler 함수에 필요한 값을 전달해서 호출하는 테스트를 할 수 있습니다.

customEvent

customEvent 속성을 이용해 handler 함수를 호출하는 함수를 정의합니다. 그러면 <VAC> 에서는 data 속성이 아닌 customEvent 속성에 선언된 함수를 호출하는 버튼을 생성합니다.

import { VAC } from 'react-vac';

function Example() {
  const props = {
    // callback
    onClick: (e) => console.log('콜백 함수 호출'),
    
    // handler
    handleClick: (value) => console.log(value)
  };

  // customEvent에서 동일한 이름의 handleClick 함수를 정의
  return (
    <VAC
      name="이벤트 테스트"
      data={props}
      customEvent={
        // props에 있는 함수와 동일한 이름의 함수 선언
        handleClick: (event, handler, data) => {
          handler('핸들러 함수 호출');
        }
      }
    />
  );
}

예제보기

customEvent에 선언하는 함수에는 3개의 파라미터를 전달합니다.

• event: 버튼의 클릭 이벤트 객체
• handler: data 속성에 전달된 동일한 이름의 함수
• data: <VAC>의 data 속성에 전달된 데이터

마치며

다음편에는 <VAC> 전체 속성 대해서 설명합니다.