7. 이벤트 다루기

 

목차

1. React 엘리먼트에서의 이벤트 처리방식
2. JSX 콜백에서의 this
3. bind() 호출없이 binding 방법
4. 합성이벤트 속성
5. 자주 쓰이는 합성 이벤트

 

---

 

1. React 엘리먼트에서의 이벤트 처리 방식

• camelCase 사용
• JSX 사용하여 함수로 이벤트 핸들러 전달
• html의 form 엘리먼트의 retrun 속성이 false라 할지라도 기본 동작 방지 불가능
• (= e.preventDefault() 메서드 반드시 호출해야 함)
• W3C 명세에 따른 합성 이벤트 정의하므로 브라우저 호환성 문제 없으나, 브라우저 고유 이벤트와 정확히 동일하게 동작하지는 않음
• DOM 엘리먼트 생성 후, 이벤트 리스너를 추가하기 위해 addEventListener() 메서드 호출할 필요 없음
• 일반적으로, ES6 클래스 사용하여 컴포넌트 정의 시  클래스의 메서드로 이벤트 핸들러 작성

 

1-2.예시코드

ON이라는 버튼이 있고 버튼을 클릭하면 OFF와 ON이 번갈아가면서 나온다고 가정하자.

이러한 버튼을 만드는 코드는 아래와 같다.

 

위에서 설명한대로, 해당 버튼이 합성 이벤트인 onClick 이벤트를 추가할 때

addEventListener 호출 대신, 단지 onClick 속성을 부여한 것을 확인할 수 있다.

 

또한 이러한 이벤트의 속성값을 this라는 키워드를 사용하여

class 필드 문법을 사용하여 handleClick 함수 내에서 bind하였다.

 

import React from 'react';

class Toggle extends React.Component {
state = { isToggleOn: true }

handleClick = () => {
    const {isToggleOn} = this.state
    this.setState({
        isToggleOn:!isToggleOn
    })
}

    render(){
        return(
            <button onClick = {this.handleClick}>
                {this.state.isToggleOn? 'ON': 'OFF' }
            </button>
        )
    }
};

export default Toggle;

 

 

2. JSX 콜백 안에서의 this

 

JS에서 클래스 메서드는 기본적으로 bind되어있지 않다.

 

따라서 위의 코드에서 onClick속성의 속성값으로

this.hadleClick 대신 handleClick으로 eventListner에 전달한다면,

실제 함수 호출 시 this는 undefined가 될 것이다.

 

 

 

2-1. bind()메서드 호출없이 bind 하는 두가지 방법

• public class 필드 문법 사용
• 화살표 함수 문법 사용

 

 

3. bind()메서드 호출없이 bind하기

3-1. public class 필드 문법

• 예시코드에서 작성한 것과 같이 this가 해당 함수 내에서 binding 되도록 하는 것

<button onClick = {this.handleClick}>
    {this.state.isToggleOn? 'ON': 'OFF' }
</button>

 

 

 

3-2. 화살표 함수 문법

• 함수 호출을 화살표 함수로 감싸주는 방법
• 해당 컴포넌트가 렌더링될 때마다 계속해서 다른 콜백이 생성된다는 문제점 존재
• 콜백이 하위 컴포넌트에 props로 전달될 경우, 그 하위 컴포넌트들은 추가로 다시 렌더링 해야할 수도 있음
• (이러한 문제점 때문에 리액트에서는 '생성자 안에서 bind()메서드 호출 / class 필드 문법 사용'의 방법을 권장)

 

            <button onClick = { () => this.handleClick() } >
                {this.state.isToggleOn? 'ON': 'OFF' }
            </button>

 

 

<참고>
이벤트 핸들러에서 추가적인 매개변수를 전달할 때
bind() 메서드 호출을 통한 binding 방법의 경우,
이벤트를 나타내는 e 인자를 명시적으로 전달하지 않아도 자동으로 전달됨

화살표 함수의 경우
(e) => {}
와 같이 이벤트를 나타내는 e 인자를 반드시 명시적으로 작성해야만 인자 전달 가능함

 

 

4. 이벤트 래퍼 SyntheticEvent 객체의 일반적인 속성

• 앞서 말한대로 React 이벤트는 WS3명세에 따른 합성 이벤트를 정의하므로 브라우저 호환성 문제가 없다.
• 이처럼 모든 브라우저에서 이벤트를 동일하게 처리하기 위해 이벤트 핸들러는 이벤트 래퍼 SyntheticEvent 객체를 전달받는다.
•  
• 브라우저 고유의 이벤트가 필요하면 아래의 속성들 중 nativeEvent 속성을 참조
• 합성 이벤트는 브라우저 고유 이벤트에 직접 대응되는 개념이 아니다.

boolean bubbles
boolean cancelable
DOMEventTarget currentTarget
boolean defaultPrevented
number eventPhase
boolean isTrusted
DOMEvent nativeEvent
void preventDefault()
boolean isDefaultPrevented()
void stopPropagation()
boolean isPropagationStopped()
void persist()
DOMEventTarget target
number timeStamp
string type

 

 

5. 자주 쓰이는 합성이벤트

 

이벤트	이벤트명	설명
Clipboard	onCopy
	onCut
	onPaste
Keyboard	onKeyDown
	onKeyPress
	onKeyUp
Focus	onFocus	실행 시 포커스 온
	onBlur
Form	onChange	폼에 입력된 데이터 값에 변화발생 시 실행
	onSubmit	폼 제출 시 실행
Mouse	onClick	클릭 시 실행
	onDoubleClick	더블클릭 시 실행
	onMouseOver
Selection	onSelect
UI	onScroll
Wheel	onWheel