From caadd4cd87683c26fa0c238846b49dd65847562a Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sat, 16 Feb 2019 23:15:28 +0900 Subject: [PATCH 1/8] add draft translation of events docs --- content/docs/reference-events.md | 142 +++++++++++++++---------------- 1 file changed, 70 insertions(+), 72 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 745c6a71e..245083001 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -1,18 +1,18 @@ --- id: events -title: SyntheticEvent +title: 합성이벤트 permalink: docs/events.html layout: docs category: Reference --- -This reference guide documents the `SyntheticEvent` wrapper that forms part of React's Event System. See the [Handling Events](/docs/handling-events.html) guide to learn more. +이 참조는 리액트의 이벤트 시스템 일부를 구성하는 `합성이벤트` 래퍼를 설명합니다. 더 많은 정보는 [이벤트 처리](/docs/handling-events.html) 문서를 보세요. -## Overview {#overview} +## 개요 {#overview} -Your event handlers will be passed instances of `SyntheticEvent`, a cross-browser wrapper around the browser's native event. It has the same interface as the browser's native event, including `stopPropagation()` and `preventDefault()`, except the events work identically across all browsers. +이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 원시 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. -If you find that you need the underlying browser event for some reason, simply use the `nativeEvent` attribute to get it. Every `SyntheticEvent` object has the following attributes: +만약 브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트들을 가집니다. ```javascript boolean bubbles @@ -31,15 +31,13 @@ number timeStamp string type ``` -> Note: +> 메모 > -> As of v0.14, returning `false` from an event handler will no longer stop event propagation. Instead, `e.stopPropagation()` or `e.preventDefault()` should be triggered manually, as appropriate. +> 0.14 버전부터 이벤트 핸들러가 `false`를 반환하더라도 이벤트 전파를 멈추지 않습니다. 대신 `e.stopPropagation()` 또는 `e.preventDefault()`를 필요할 때 호출하세요. -### Event Pooling {#event-pooling} +### 이벤트 풀링 {#event-pooling} -The `SyntheticEvent` is pooled. This means that the `SyntheticEvent` object will be reused and all properties will be nullified after the event callback has been invoked. -This is for performance reasons. -As such, you cannot access the event in an asynchronous way. +`합성이벤트`는 [풀링](https://en.wikipedia.org/wiki/Pool_(computer_science))됩니다. `합성이벤트` 객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화됩니다. 성능적인 이유가 있습니다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없습니다. ```javascript function onClick(event) { @@ -52,23 +50,23 @@ function onClick(event) { console.log(eventType); // => "click" }, 0); - // Won't work. this.state.clickEvent will only contain null values. + // 동작하지 않습니다. this.state.clickEvent 은 null만 가지게 될 것입니다. this.setState({clickEvent: event}); - // You can still export event properties. + // 이벤트 프로퍼티를 추출할 수 있습니다. this.setState({eventType: event.type}); } ``` -> Note: +> 메모 > -> If you want to access the event properties in an asynchronous way, you should call `event.persist()` on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code. +> 비동기적으로 이벤트 속성을 참조하고 싶다면 이벤트 객체의 `event.persist()` 를 호출하세요. 합성 이벤트 풀에서 제거되고 사용자의 코드에서 참조가 가능해집니다. -## Supported Events {#supported-events} +## 지원 이벤트 목록 {#supported-events} -React normalizes events so that they have consistent properties across different browsers. +React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다. -The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase. +다음 이벤트 핸들러들은 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에서 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 `Capture`를 덧붙이세요. 예를 들어 `onClick` 대신 `onClickCapture`를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다. - [Clipboard Events](#clipboard-events) - [Composition Events](#composition-events) @@ -89,17 +87,17 @@ The event handlers below are triggered by an event in the bubbling phase. To reg * * * -## Reference {#reference} +## 참조 {#reference} -### Clipboard Events {#clipboard-events} +### 클립보드 이벤트 {#clipboard-events} -Event names: +이벤트 이름 ``` onCopy onCut onPaste ``` -Properties: +속성 ```javascript DOMDataTransfer clipboardData @@ -107,15 +105,15 @@ DOMDataTransfer clipboardData * * * -### Composition Events {#composition-events} +### 합성 이벤트 {#composition-events} -Event names: +이벤트 이름 ``` onCompositionEnd onCompositionStart onCompositionUpdate ``` -Properties: +속성 ```javascript string data @@ -124,15 +122,15 @@ string data * * * -### Keyboard Events {#keyboard-events} +### 키보드 이벤트 {#keyboard-events} -Event names: +이벤트 이름 ``` onKeyDown onKeyPress onKeyUp ``` -Properties: +속성 ```javascript boolean altKey @@ -149,21 +147,21 @@ boolean shiftKey number which ``` -The `key` property can take any of the values documented in the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). +키 프로퍼티는 [DOM 3단계 이벤트 명세](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)에 있는 어떤 값이든 가질 수 있습니다. * * * -### Focus Events {#focus-events} +### 초점 이벤트 {#focus-events} -Event names: +이벤트 이름 ``` onFocus onBlur ``` -These focus events work on all elements in the React DOM, not just form elements. +초점 이벤트들은 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. -Properties: +속성 ```javascript DOMEventTarget relatedTarget @@ -171,21 +169,21 @@ DOMEventTarget relatedTarget * * * -### Form Events {#form-events} +### Form 이벤트 {#form-events} -Event names: +이벤트 이름 ``` onChange onInput onInvalid onSubmit ``` -For more information about the onChange event, see [Forms](/docs/forms.html). +onChange 이벤트에 대한 더 자세한 정보는 [Forms](/docs/forms.html)을 참조하세요. * * * -### Mouse Events {#mouse-events} +### 마우스 이벤트 {#mouse-events} -Event names: +이벤트 이름 ``` onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit @@ -193,13 +191,13 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -The `onMouseEnter` and `onMouseLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase. +`onMouseEnter` 및 `onMouseLeave` 이벤트는 일반적인 버블링 대신 떠나는 요소에서 들어가는 요소로 전파되고 캡처 단계가 없습니다. -Properties: +속성 ```javascript boolean altKey -number button +number button number buttons number clientX number clientY @@ -216,20 +214,20 @@ boolean shiftKey * * * -### Pointer Events {#pointer-events} +### 포인터 이벤트 {#pointer-events} -Event names: +이벤트 이름 ``` onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -The `onPointerEnter` and `onPointerLeave` events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase. +`onPointerEnter` 및 `onPointerLeave` 이벤트는 일반적인 버블링 대신 떠나는 요소에서 들어가는 요소로 전파되고 캡처 단계가 없습니다. -Properties: +속성 -As defined in the [W3 spec](https://www.w3.org/TR/pointerevents/), pointer events extend [Mouse Events](#mouse-events) with the following properties: +[W3 명세](https://www.w3.org/TR/pointerevents/)에 정의된 대로 포인터 이벤트는 [마우스 이벤트](#mouse-events)와 다음 속성을 포함해 확장합니다. ```javascript number pointerId @@ -244,17 +242,17 @@ string pointerType boolean isPrimary ``` -A note on cross-browser support: +크로스 브라우저 지원에 대한 메모 -Pointer events are not yet supported in every browser (at the time of writing this article, supported browsers include: Chrome, Firefox, Edge, and Internet Explorer). React deliberately does not polyfill support for other browsers because a standard-conform polyfill would significantly increase the bundle size of `react-dom`. +포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다. (이 문서를 작성할 땐 Chrome, Firefox, Edge 및 Internet Explorer가 지원함.) 표준 폴리필은 `react-dom`의 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. -If your application requires pointer events, we recommend adding a third party pointer event polyfill. +어플리케이션이 포인터 이벤트를 의존한다면 직접 서드 파티 포인터 폴리필을 추가하세요. * * * -### Selection Events {#selection-events} +### 선택 이벤트 {#selection-events} -Event names: +이벤트 이름 ``` onSelect @@ -262,15 +260,15 @@ onSelect * * * -### Touch Events {#touch-events} +### 터치 이벤트 {#touch-events} -Event names: +이벤트 이름 ``` onTouchCancel onTouchEnd onTouchMove onTouchStart ``` -Properties: +속성 ```javascript boolean altKey @@ -285,15 +283,15 @@ DOMTouchList touches * * * -### UI Events {#ui-events} +### UI 이벤트 {#ui-events} -Event names: +이벤트 이름 ``` onScroll ``` -Properties: +속성 ```javascript number detail @@ -302,15 +300,15 @@ DOMAbstractView view * * * -### Wheel Events {#wheel-events} +### 휠 이벤트 {#wheel-events} -Event names: +이벤트 이름 ``` onWheel ``` -Properties: +속성 ```javascript number deltaMode @@ -321,9 +319,9 @@ number deltaZ * * * -### Media Events {#media-events} +### 미디어 이벤트 {#media-events} -Event names: +이벤트 이름 ``` onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted @@ -334,9 +332,9 @@ onTimeUpdate onVolumeChange onWaiting * * * -### Image Events {#image-events} +### 이미지 이벤트 {#image-events} -Event names: +이벤트 이름 ``` onLoad onError @@ -344,15 +342,15 @@ onLoad onError * * * -### Animation Events {#animation-events} +### 애니메이션 이벤트 {#animation-events} -Event names: +이벤트 이름 ``` onAnimationStart onAnimationEnd onAnimationIteration ``` -Properties: +속성 ```javascript string animationName @@ -362,15 +360,15 @@ float elapsedTime * * * -### Transition Events {#transition-events} +### 트랜지션 이벤트 {#transition-events} -Event names: +이벤트 이름 ``` onTransitionEnd ``` -Properties: +속성 ```javascript string propertyName @@ -380,9 +378,9 @@ float elapsedTime * * * -### Other Events {#other-events} +### 기타 이벤트 {#other-events} -Event names: +이벤트 이름 ``` onToggle From 3d1d452c0b4a993cb8e5c5ed6cb7272134ef5393 Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sat, 16 Feb 2019 23:37:21 +0900 Subject: [PATCH 2/8] remove space, remove useless expression remove if --- content/docs/reference-events.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 245083001..d2332da13 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -12,7 +12,7 @@ category: Reference 이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 원시 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. -만약 브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트들을 가집니다. +브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트들을 가집니다. ```javascript boolean bubbles @@ -197,7 +197,7 @@ onMouseMove onMouseOut onMouseOver onMouseUp ```javascript boolean altKey -number button +number button number buttons number clientX number clientY @@ -244,7 +244,7 @@ boolean isPrimary 크로스 브라우저 지원에 대한 메모 -포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다. (이 문서를 작성할 땐 Chrome, Firefox, Edge 및 Internet Explorer가 지원함.) 표준 폴리필은 `react-dom`의 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. +포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다. (이 문서를 작성할 땐 Chrome, Firefox, Edge 및 Internet Explorer가 지원함.) 표준 폴리필은 `react-dom` 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. 어플리케이션이 포인터 이벤트를 의존한다면 직접 서드 파티 포인터 폴리필을 추가하세요. From 7df9b928059799e804329df007850c38c629b074 Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sun, 17 Feb 2019 03:17:25 +0900 Subject: [PATCH 3/8] use loanword use loanword --- content/docs/reference-events.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index d2332da13..2f70da772 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -53,7 +53,7 @@ function onClick(event) { // 동작하지 않습니다. this.state.clickEvent 은 null만 가지게 될 것입니다. this.setState({clickEvent: event}); - // 이벤트 프로퍼티를 추출할 수 있습니다. + // 이벤트 속성을 추출할 수 있습니다. this.setState({eventType: event.type}); } ``` @@ -147,11 +147,11 @@ boolean shiftKey number which ``` -키 프로퍼티는 [DOM 3단계 이벤트 명세](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)에 있는 어떤 값이든 가질 수 있습니다. +`key` 프로퍼티는 [DOM 3단계 이벤트 명세](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)에 있는 어떤 값이든 가질 수 있습니다. * * * -### 초점 이벤트 {#focus-events} +### 포커스 이벤트 {#focus-events} 이벤트 이름 @@ -159,7 +159,7 @@ number which onFocus onBlur ``` -초점 이벤트들은 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. +포커스 이벤트들은 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. 속성 From df9bd04e393e8cba9123d09defb02e14e5373b9a Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sun, 17 Feb 2019 03:28:24 +0900 Subject: [PATCH 4/8] use singular form --- content/docs/reference-events.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 2f70da772..7d40ad199 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -10,9 +10,9 @@ category: Reference ## 개요 {#overview} -이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 원시 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. +이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. -브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트들을 가집니다. +브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트를 가집니다. ```javascript boolean bubbles @@ -66,7 +66,7 @@ function onClick(event) { React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다. -다음 이벤트 핸들러들은 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에서 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 `Capture`를 덧붙이세요. 예를 들어 `onClick` 대신 `onClickCapture`를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다. +다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 `Capture`를 덧붙이세요. 예를 들어 `onClick` 대신 `onClickCapture`를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다. - [Clipboard Events](#clipboard-events) - [Composition Events](#composition-events) @@ -147,7 +147,7 @@ boolean shiftKey number which ``` -`key` 프로퍼티는 [DOM 3단계 이벤트 명세](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)에 있는 어떤 값이든 가질 수 있습니다. +`key` 속성은 [DOM 레벨 3 이벤트 명세](https://www.w3.org/TR/uievents-key/#named-key-attribute-values)에 있는 어떤 값이든 가질 수 있습니다. * * * @@ -159,7 +159,7 @@ number which onFocus onBlur ``` -포커스 이벤트들은 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. +포커스 이벤트는 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. 속성 From 8474e6fa0a02a67f7e1c6d727950c1dfd99038af Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sun, 17 Feb 2019 03:34:37 +0900 Subject: [PATCH 5/8] translate omitted list --- content/docs/reference-events.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 7d40ad199..6bf733330 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -68,22 +68,22 @@ React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도 다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 `Capture`를 덧붙이세요. 예를 들어 `onClick` 대신 `onClickCapture`를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다. -- [Clipboard Events](#clipboard-events) -- [Composition Events](#composition-events) -- [Keyboard Events](#keyboard-events) -- [Focus Events](#focus-events) -- [Form Events](#form-events) -- [Mouse Events](#mouse-events) -- [Pointer Events](#pointer-events) -- [Selection Events](#selection-events) -- [Touch Events](#touch-events) -- [UI Events](#ui-events) -- [Wheel Events](#wheel-events) -- [Media Events](#media-events) -- [Image Events](#image-events) -- [Animation Events](#animation-events) -- [Transition Events](#transition-events) -- [Other Events](#other-events) +- [클립보드 이벤트](#clipboard-events) +- [합성 이벤트](#composition-events) +- [키보드 이벤트](#keyboard-events) +- [포커스 이벤트](#focus-events) +- [Form 이벤트](#form-events) +- [마우스 이벤트](#mouse-events) +- [포인터 이벤트](#pointer-events) +- [선택 이벤트](#selection-events) +- [터치 이벤트](#touch-events) +- [UI 이벤트](#ui-events) +- [휠 이벤트](#wheel-events) +- [미디어 이벤트](#media-events) +- [이미지 이벤트](#image-events) +- [애니메이션 이벤트](#animation-events) +- [트랜지션 이벤트](#transition-events) +- [기타 이벤트](#other-events) * * * From 48e22b98fc5d9f1a953b4fe2ca659af5c1c99575 Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sun, 17 Feb 2019 04:01:33 +0900 Subject: [PATCH 6/8] unity expression --- content/docs/reference-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index 6bf733330..bbbc3ddaa 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -12,7 +12,7 @@ category: Reference 이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. -브라우저의 기본 이벤트가 필요하다면 `nativeEvent` 어트리뷰트로 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트를 가집니다. +브라우저의 고유 이벤트가 필요하다면 `nativeEvent` 어트리뷰트를 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트를 가집니다. ```javascript boolean bubbles From 116ef8f7c9717c502f47de3ae0b1c0ea2798a30c Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Sun, 17 Feb 2019 04:09:11 +0900 Subject: [PATCH 7/8] make it fluent --- content/docs/reference-events.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index bbbc3ddaa..a0de56977 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -6,7 +6,7 @@ layout: docs category: Reference --- -이 참조는 리액트의 이벤트 시스템 일부를 구성하는 `합성이벤트` 래퍼를 설명합니다. 더 많은 정보는 [이벤트 처리](/docs/handling-events.html) 문서를 보세요. +이 문서는 리액트의 이벤트 시스템 일부를 구성하는 `합성이벤트` 래퍼를 설명합니다. 더 많은 정보는 [이벤트 처리하기](/docs/handling-events.html) 문서를 보세요. ## 개요 {#overview} @@ -159,7 +159,7 @@ number which onFocus onBlur ``` -포커스 이벤트는 form 요소 뿐만이 아니라 모든 React DOM 요소에 작동합니다. +포커스 이벤트는 form 엘리먼트 뿐만이 아니라 모든 React DOM 엘리먼트에 작동합니다. 속성 @@ -191,7 +191,7 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -`onMouseEnter` 및 `onMouseLeave` 이벤트는 일반적인 버블링 대신 떠나는 요소에서 들어가는 요소로 전파되고 캡처 단계가 없습니다. +`onMouseEnter` 및 `onMouseLeave` 이벤트는 일반적인 버블링 대신 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. 속성 @@ -223,7 +223,7 @@ onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -`onPointerEnter` 및 `onPointerLeave` 이벤트는 일반적인 버블링 대신 떠나는 요소에서 들어가는 요소로 전파되고 캡처 단계가 없습니다. +`onPointerEnter` 및 `onPointerLeave` 이벤트는 일반적인 버블링 대신 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. 속성 @@ -244,7 +244,7 @@ boolean isPrimary 크로스 브라우저 지원에 대한 메모 -포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다. (이 문서를 작성할 땐 Chrome, Firefox, Edge 및 Internet Explorer가 지원함.) 표준 폴리필은 `react-dom` 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. +포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다(이 문서를 작성하는 시점엔 Chrome, Firefox, Edge 및 Internet Explorer가 지원합니다). 표준 폴리필은 `react-dom` 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. 어플리케이션이 포인터 이벤트를 의존한다면 직접 서드 파티 포인터 폴리필을 추가하세요. From 61d25cd250fc658b77e301b3f94957037a3e6ed2 Mon Sep 17 00:00:00 2001 From: BaHwan Han Date: Mon, 11 Mar 2019 00:51:06 +0900 Subject: [PATCH 8/8] apply review --- content/docs/reference-events.md | 78 ++++++++++++++++---------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/content/docs/reference-events.md b/content/docs/reference-events.md index a0de56977..a5d7cdae7 100644 --- a/content/docs/reference-events.md +++ b/content/docs/reference-events.md @@ -1,18 +1,18 @@ --- id: events -title: 합성이벤트 +title: 합성 이벤트(SyntheticEvent) permalink: docs/events.html layout: docs category: Reference --- -이 문서는 리액트의 이벤트 시스템 일부를 구성하는 `합성이벤트` 래퍼를 설명합니다. 더 많은 정보는 [이벤트 처리하기](/docs/handling-events.html) 문서를 보세요. +이 문서는 React의 이벤트 시스템 일부를 구성하는 `SyntheticEvent` 래퍼를 설명합니다. 더 많은 정보는 [이벤트 처리하기](/docs/handling-events.html) 문서를 보세요. ## 개요 {#overview} -이벤트 핸들러는 브라우저의 통합 브라우저 이벤트 래퍼 `합성이벤트` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. +이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 `SyntheticEvent` 객체를 전달받습니다. `stopPropagation()` 와 `preventDefault()`를 포함해서 인터페이스는 브라우저의 고유 이벤트와 같지만 모든 브라우저에서 동일하게 동작합니다. -브라우저의 고유 이벤트가 필요하다면 `nativeEvent` 어트리뷰트를 참조하세요. 모든 `합성이벤트` 객체는 다음 어트리뷰트를 가집니다. +브라우저의 고유 이벤트가 필요하다면 `nativeEvent` 어트리뷰트를 참조하세요. 모든 `합성 이벤트` 객체는 다음 어트리뷰트를 가집니다. ```javascript boolean bubbles @@ -31,13 +31,13 @@ number timeStamp string type ``` -> 메모 +> 주의 > > 0.14 버전부터 이벤트 핸들러가 `false`를 반환하더라도 이벤트 전파를 멈추지 않습니다. 대신 `e.stopPropagation()` 또는 `e.preventDefault()`를 필요할 때 호출하세요. ### 이벤트 풀링 {#event-pooling} -`합성이벤트`는 [풀링](https://en.wikipedia.org/wiki/Pool_(computer_science))됩니다. `합성이벤트` 객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화됩니다. 성능적인 이유가 있습니다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없습니다. +`SyntheticEvent`는 [풀링](https://en.wikipedia.org/wiki/Pool_(computer_science))됩니다. 성능상의 이유로 `SyntheticEvent` 객체는 재사용되고 모든 속성은 이벤트 핸들러가 호출된 다음 초기화됩니다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없습니다. ```javascript function onClick(event) { @@ -58,38 +58,38 @@ function onClick(event) { } ``` -> 메모 +> 주의 > > 비동기적으로 이벤트 속성을 참조하고 싶다면 이벤트 객체의 `event.persist()` 를 호출하세요. 합성 이벤트 풀에서 제거되고 사용자의 코드에서 참조가 가능해집니다. -## 지원 이벤트 목록 {#supported-events} +## 지원하는 이벤트 {#supported-events} React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화합니다. 다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출됩니다. 캡처 단계에 이벤트 핸들러를 등록하기 위해서는 이벤트 이름에 `Capture`를 덧붙이세요. 예를 들어 `onClick` 대신 `onClickCapture`를 사용해서 캡처 단계에서 클릭 이벤트 핸들러를 사용할 수 있습니다. -- [클립보드 이벤트](#clipboard-events) -- [합성 이벤트](#composition-events) -- [키보드 이벤트](#keyboard-events) -- [포커스 이벤트](#focus-events) +- [Clipboard 이벤트](#clipboard-events) +- [Composition 이벤트](#composition-events) +- [Keyboard 이벤트](#keyboard-events) +- [Focus 이벤트](#focus-events) - [Form 이벤트](#form-events) -- [마우스 이벤트](#mouse-events) -- [포인터 이벤트](#pointer-events) -- [선택 이벤트](#selection-events) -- [터치 이벤트](#touch-events) +- [Mouse 이벤트](#mouse-events) +- [Pointer 이벤트](#pointer-events) +- [Selection 이벤트](#selection-events) +- [Touch 이벤트](#touch-events) - [UI 이벤트](#ui-events) -- [휠 이벤트](#wheel-events) -- [미디어 이벤트](#media-events) -- [이미지 이벤트](#image-events) -- [애니메이션 이벤트](#animation-events) -- [트랜지션 이벤트](#transition-events) +- [Wheel 이벤트](#wheel-events) +- [Media 이벤트](#media-events) +- [Image 이벤트](#image-events) +- [Animation 이벤트](#animation-events) +- [Transition 이벤트](#transition-events) - [기타 이벤트](#other-events) * * * ## 참조 {#reference} -### 클립보드 이벤트 {#clipboard-events} +### Clipboard 이벤트 {#clipboard-events} 이벤트 이름 @@ -105,7 +105,7 @@ DOMDataTransfer clipboardData * * * -### 합성 이벤트 {#composition-events} +### Composition 이벤트 {#composition-events} 이벤트 이름 @@ -122,7 +122,7 @@ string data * * * -### 키보드 이벤트 {#keyboard-events} +### Keyboard 이벤트 {#keyboard-events} 이벤트 이름 @@ -151,7 +151,7 @@ number which * * * -### 포커스 이벤트 {#focus-events} +### Focus 이벤트 {#focus-events} 이벤트 이름 @@ -177,11 +177,11 @@ DOMEventTarget relatedTarget onChange onInput onInvalid onSubmit ``` -onChange 이벤트에 대한 더 자세한 정보는 [Forms](/docs/forms.html)을 참조하세요. +onChange 이벤트에 대한 더 자세한 정보는 [폼 문서](/docs/forms.html)를 참조하세요. * * * -### 마우스 이벤트 {#mouse-events} +### Mouse 이벤트 {#mouse-events} 이벤트 이름 @@ -191,7 +191,7 @@ onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp ``` -`onMouseEnter` 및 `onMouseLeave` 이벤트는 일반적인 버블링 대신 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. +`onMouseEnter` 및 `onMouseLeave` 이벤트는 일반적인 버블링 대신 마우스가 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. 속성 @@ -214,7 +214,7 @@ boolean shiftKey * * * -### 포인터 이벤트 {#pointer-events} +### Pointer 이벤트 {#pointer-events} 이벤트 이름 @@ -223,7 +223,7 @@ onPointerDown onPointerMove onPointerUp onPointerCancel onGotPointerCapture onLostPointerCapture onPointerEnter onPointerLeave onPointerOver onPointerOut ``` -`onPointerEnter` 및 `onPointerLeave` 이벤트는 일반적인 버블링 대신 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. +`onPointerEnter` 및 `onPointerLeave` 이벤트는 일반적인 버블링 대신 포인터가 떠나는 엘리먼트에서 들어가는 엘리먼트로 전파되고 캡처 단계가 없습니다. 속성 @@ -242,15 +242,15 @@ string pointerType boolean isPrimary ``` -크로스 브라우저 지원에 대한 메모 +크로스 브라우저 지원 주의사항 포인터 이벤트는 아직 모든 브라우저에서 지원되지 않습니다(이 문서를 작성하는 시점엔 Chrome, Firefox, Edge 및 Internet Explorer가 지원합니다). 표준 폴리필은 `react-dom` 번들을 무겁게 만들기 때문에 React가 직접 브라우저 호환성을 위해 폴리필을 제공하진 않습니다. -어플리케이션이 포인터 이벤트를 의존한다면 직접 서드 파티 포인터 폴리필을 추가하세요. +애플리케이션이 포인터 이벤트를 의존한다면 직접 서드 파티 포인터 폴리필을 추가하세요. * * * -### 선택 이벤트 {#selection-events} +### Selection 이벤트 {#selection-events} 이벤트 이름 @@ -260,7 +260,7 @@ onSelect * * * -### 터치 이벤트 {#touch-events} +### Touch 이벤트 {#touch-events} 이벤트 이름 @@ -300,7 +300,7 @@ DOMAbstractView view * * * -### 휠 이벤트 {#wheel-events} +### Wheel 이벤트 {#wheel-events} 이벤트 이름 @@ -319,7 +319,7 @@ number deltaZ * * * -### 미디어 이벤트 {#media-events} +### Media 이벤트 {#media-events} 이벤트 이름 @@ -332,7 +332,7 @@ onTimeUpdate onVolumeChange onWaiting * * * -### 이미지 이벤트 {#image-events} +### Image 이벤트 {#image-events} 이벤트 이름 @@ -342,7 +342,7 @@ onLoad onError * * * -### 애니메이션 이벤트 {#animation-events} +### Animation 이벤트 {#animation-events} 이벤트 이름 @@ -360,7 +360,7 @@ float elapsedTime * * * -### 트랜지션 이벤트 {#transition-events} +### Transition 이벤트 {#transition-events} 이벤트 이름