-
Notifications
You must be signed in to change notification settings - Fork 95
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
59 changed files
with
10,761 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
211 changes: 211 additions & 0 deletions
211
...ges/docs/i18n/ko/docusaurus-plugin-content-docs/version-4.6.0/api/Component.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| --- | ||
| custom_edit_url: null | ||
| --- | ||
|
|
||
| ```ts | ||
| class Component | ||
| ``` | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 컴포넌트의 이벤트을 관리할 수 있게 하는 클래스 | ||
|
|
||
| <div className="container"> | ||
| <div className="row mb-2"><div className="col col--6"><strong>Properties</strong></div><div className="col col--6"><strong>Methods</strong></div></div> | ||
| <div className="row"><div className="col col--6"><a href="#VERSION">VERSION</a><span className="badge badge--info margin-left--sm">static</span></div><div className="col col--6"><a href="#trigger">trigger</a><br/><a href="#once">once</a><br/><a href="#hasOn">hasOn</a><br/><a href="#on">on</a><br/><a href="#off">off</a></div></div> | ||
| </div> | ||
|
|
||
| ## Properties | ||
| ### VERSION {#VERSION} | ||
|
|
||
| <div> | ||
| <span className="badge badge--info">static</span> | ||
| </div> | ||
|
|
||
| 버전정보 문자열 | ||
|
|
||
| **Type**: string | ||
|
|
||
| Component.VERSION; // ex) 3.0.0 | ||
|
|
||
| ## Methods | ||
|
|
||
| ### trigger {#trigger} | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 커스텀 이벤트를 발생시킨다 | ||
|
|
||
| **Returns**: this | ||
| - 컴포넌트 자신의 인스턴스 | ||
|
|
||
| |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| |event|string \| ComponentEvent|||발생할 커스텀 이벤트의 이름 또는 ComponentEvent의 인스턴스| | ||
| |params|Array<any> \| $ts:...|||커스텀 이벤트가 발생할 때 전달할 데이터| | ||
|
|
||
| ```ts | ||
| import Component, { ComponentEvent } from "@egjs/component"; | ||
| class Some extends Component<{ | ||
| beforeHi: ComponentEvent<{ foo: number; bar: string }>; | ||
| hi: { foo: { a: number; b: boolean } }; | ||
| someEvent: (foo: number, bar: string) => void; | ||
| someOtherEvent: void; // When there's no event argument | ||
| }> { | ||
| some(){ | ||
| if(this.trigger("beforeHi")){ // When event call to stop return false. | ||
| this.trigger("hi");// fire hi event. | ||
| } | ||
| } | ||
| } | ||
| const some = new Some(); | ||
| some.on("beforeHi", e => { | ||
| if(condition){ | ||
| e.stop(); // When event call to stop, `hi` event not call. | ||
| } | ||
| // `currentTarget` is component instance. | ||
| console.log(some === e.currentTarget); // true | ||
| typeof e.foo; // number | ||
| typeof e.bar; // string | ||
| }); | ||
| some.on("hi", e => { | ||
| typeof e.foo.b; // boolean | ||
| }); | ||
| // If you want to more know event design. You can see article. | ||
| // https://github.com/naver/egjs-component/wiki/How-to-make-Component-event-design%3F | ||
| ``` | ||
|
|
||
| ### once {#once} | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 이벤트가 한번만 실행된다. | ||
|
|
||
| **Returns**: this | ||
| - 컴포넌트 자신의 인스턴스 | ||
|
|
||
| |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| |eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트| | ||
| |handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수| | ||
|
|
||
| ```ts | ||
| import Component, { ComponentEvent } from "@egjs/component"; | ||
| class Some extends Component<{ | ||
| hi: ComponentEvent; | ||
| }> { | ||
| hi() { | ||
| alert("hi"); | ||
| } | ||
| thing() { | ||
| this.once("hi", this.hi); | ||
| } | ||
| } | ||
| var some = new Some(); | ||
| some.thing(); | ||
| some.trigger(new ComponentEvent("hi")); | ||
| // fire alert("hi"); | ||
| some.trigger(new ComponentEvent("hi")); | ||
| // Nothing happens | ||
| ``` | ||
|
|
||
| ### hasOn {#hasOn} | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 컴포넌트에 이벤트가 등록됐는지 확인한다. | ||
|
|
||
| **Returns**: boolean | ||
| - 이벤트 등록 여부 | ||
|
|
||
| |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| |eventName|string|||등록 여부를 확인할 이벤트의 이름| | ||
|
|
||
| ```ts | ||
| import Component from "@egjs/component"; | ||
| class Some extends Component<{ | ||
| hi: void; | ||
| }> { | ||
| some() { | ||
| this.hasOn("hi");// check hi event. | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### on {#on} | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 컴포넌트에 이벤트를 등록한다. | ||
|
|
||
| **Returns**: this | ||
| - 컴포넌트 자신의 인스턴스 | ||
|
|
||
| |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| |eventName|string \| $ts:...|||등록할 이벤트의 이름 또는 이벤트 이름-핸들러 오브젝트| | ||
| |handlerToAttach|function \| $ts:...|✔️||등록할 이벤트의 핸들러 함수| | ||
|
|
||
| ```ts | ||
| import Component, { ComponentEvent } from "@egjs/component"; | ||
| class Some extends Component<{ | ||
| hi: void; | ||
| }> { | ||
| hi() { | ||
| console.log("hi"); | ||
| } | ||
| some() { | ||
| this.on("hi",this.hi); //attach event | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### off {#off} | ||
|
|
||
| <div> | ||
|
|
||
| </div> | ||
|
|
||
| 컴포넌트에 등록된 이벤트를 해제한다.<br/>`eventName`이 주어지지 않았을 경우 모든 이벤트 핸들러를 제거한다.<br/>`handlerToAttach`가 주어지지 않았을 경우 `eventName`에 해당하는 모든 이벤트 핸들러를 제거한다. | ||
|
|
||
| **Returns**: this | ||
| - 컴포넌트 자신의 인스턴스 | ||
|
|
||
| |PARAMETER|TYPE|OPTIONAL|DEFAULT|DESCRIPTION| | ||
| |:---:|:---:|:---:|:---:|:---:| | ||
| |eventName|string \| $ts:...|✔️||해제할 이벤트의 이름| | ||
| |handlerToDetach|function \| $ts:...|✔️||해제할 이벤트의 핸들러 함수| | ||
|
|
||
| ```ts | ||
| import Component, { ComponentEvent } from "@egjs/component"; | ||
| class Some extends Component<{ | ||
| hi: void; | ||
| }> { | ||
| hi() { | ||
| console.log("hi"); | ||
| } | ||
| some() { | ||
| this.off("hi",this.hi); //detach event | ||
| } | ||
| } | ||
| ``` | ||
|
|
Oops, something went wrong.