마이그레이션 가이드 (v2 to v3)

Component의 v3에서는 기존 v2의 다음과 같은 단점을 개선하도록 기획되었습니다.

1. 고정된 기본 프로퍼티 추가 및 첫번째 이벤트 프로퍼티로 오브젝트 타입을 강제

기존 v2 사용자는 eventType이나 stop() 등 기본적으로 추가되는 이벤트 프로퍼티를 사용할 필요가 없을 때에도 반드시 이를 사용해야만 했습니다. v3에서는 새롭게 ComponentEvent라는 클래스를 만들어, 이러한 기본 프로퍼티들을 포함하게 함으로써 이를 극복하고 다양한 이벤트 타입을 사용할 수 있도록 했습니다.

import Component, { ComponentEvent } from "@egjs/component";

// 추가적으로 number, string 등 오브젝트가 아닌 타입도 활용 가능하게 되었습니다.
class Derived extends Component<{
  event1: number;
  event2: string;
  event3: void;
  event4: ComponentEvent<{ additionalProp: number }>;
  event5: ComponentEvent; // 추가 프로퍼티가 없는 경우
  event6: (a: number, b: string) => void;
}> {
  // ...
}

2. 이벤트타입 지정시에 interface를 지정 불가

타입 추론 기능 사용시, 위의 기본 프로퍼티를 타입에 추가하는 과정에 문제가 있어 interface를 컴포넌트가 트리거하는 이벤트 타입들로써 지정할 수 없었습니다. v3에서는 이를 개선하여 interface를 추가적으로 type형태로 변환해서 사용할 필요가 없도록 변경했습니다.

import Component from "@egjs/component";

interface DerivedEvents {
  event1: string;
  event2: number;
}

class Derived extends Component<DerivedEvents> {}

코드 마이그레이션 가이드

컴포넌트에서 기존에 기본적으로 제공되던 프로퍼티들을 활용하시려면 다음과 같이 ComponentEvent를 사용하시면 됩니다.

기존(~v2)

import Component from "@egjs/component";

class Derived extends Component<{
  event1: { prop1: number; prop2: string };
  event2: void;
}> {
  // ...
}

const component = new Derived();
// 이벤트 트리거
component.trigger("event1", { prop1: 123, prop2: "abc" });
component.trigger("event2");

v3

import Component, { ComponentEvent } from "@egjs/component";

class Derived extends Component<{
  event1: ComponentEvent<{ prop1: number; prop2: string }>;
  event2: ComponentEvent;
}> {
  // ...
}

const component = new Derived();
// 이벤트 트리거
component.trigger(new ComponentEvent("event1", { prop1: 123, prop2: "abc" }));
component.trigger(new ComponentEvent("event2"));

추가로, ComponentEvent에 isCanceled() 메소드를 추가함에 따라, 기존에 이벤트의 stop()이 호출되었는지 여부를 반환하던 trigger 메소드가 this를 반환하도록 변경했습니다. 이에 따른 코드 변경점은 다음과 같습니다.

기존(~v2)

const component = new Component();

if (component.trigger("event")) {
  // ...stop()이 호출되지 않았을 때에 대한 처리...
}

v3

const component = new Component();
const event = new ComponentEvent("event");
component.trigger(event);

if (!event.isCanceled()) {
  // ...stop()이 호출되지 않았을 때에 대한 처리...
}