4장. 이벤트 핸들링

# 이벤트 핸들링?

DOM 요소들과 상호 작용하는것을 이벤트 라고 한다.  예를 들어, 버튼에 마우스 커서를 올렸을때 onmouseover 이벤트를 실행하고 클릭했을때는 onclick 이벤트를 실행한다.

# 리액트의 이벤트 시스템

리액트의 이벤트 시스템은 웹 브라우저 HTML 이벤트와 인터페이스가 동일하다.

import {useState} from 'react';

const Say = () => {
	const [message, setMessage] = useState('');
    const onClickEnter = () => setMessage('안녕하세요!');
   	const onClickLeave = () => setMessage('안녕히가세요!)';
    
    const [color,setColor] = useState('black');
    
    return (
    <div>
    	<button onClick = {onClickEnter}>입장</button>
       	<button onClick = {onClickLeave}>퇴장</button>
    )

# 이벤트를 사용할때 주의사항

1. 이벤트 이름은 카멜 표기법으로 작성합니다.

예를 들면, onclick 이 아닌 onClick 으로 작성해야합니다.

 

2. 이벤트를 실행할 자바스크립트 코드를 전달하는것이 아닌, 함수 형태의 값으로 전달합니다.

리액트에서는 함수형태로 객체를 전달하므로, 화살표 함수 문법 및 렌더링 부분 외부에 만들어 전달해야합니다.

 

3. DOM 요소에만 이벤트를 설정 할수 있습니다.

div,button,input,form,span 등 DOM 요소에는 이벤트를 설정 가능하지만 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 할 수 없습니다. 예를들어, onClick 값을 설정하면 함수가 실행되는것이 아닌 props를 전달해주는것입니다.

 

# onChange 이벤트 핸들링

1. onChange 이벤트 설정

import { Component } from 'react';

class EventPractice extends Component {
	render() {
    return (
    	<div>
        <h1> 이벤트 연습 </h1>
        <input 
        type = "text"
        name = "ex"
        placeholder = "입력"
        onChange = {
        (e) => {
        	console.log(e.target.value);
            }
           }
           />
         </div>
       );

 

console.log(e) 로 작성시 콘솔에 입력된 e 객체는 네이티브 이벤트와 달리 이벤트가 끝나고나면 초기화 되므로, 정보를 참조 할 수 없습니다. 만약, 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해야합니다.

onChange 이벤트가 발생할때는, e.target.value 를 콘솔에 기록하면 값을 바꿀때마다 콘솔에 기록됩니다.

 

2. state에 input 값 담기

import { Component } from 'react';

class EventPractice extends Component {

	state = {
    	message : ''
        }
        
	render() {
    return (
    	<div>
        <h1> 이벤트 연습 </h1>
        <input 
        type = "text"
        name = "ex"
        placeholder = "입력"
        value = {this.state.message}
        onChange = {
        (e) => {
      		this.setState({
            message : e.target.value
            })
            }
           }
           />
         </div>
       );

this.state 메서드를 호출하여 state를 업데이트 하는 과정 입니다.

 

# 임의 메서드 만들기 

"이벤트에 실행할 자바스크립트 코드를 전달하는것이 아닌, 함수 형태의 값을 전달합니다"

따라서, 이벤트를 처리할때 렌더링을 하는 동시에 함수를 만들어 전달해주는 방법, 함수를 미리 준비해 전달해주는 방법이 있습니다.

후자는 기능상으로는 차이가 없지만 가독성은 매우 높습니다. 

 

import { Component } from 'react';

class EventPractice extends Component {

	state = {
    	message : ''
        }
        
    constuctor(props) = {
    	super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
        }
        
    handleChange(e) {
    	this.setState({
        	message: e.target.value
            });
        }
    handleClick() {
    	alert(this.state.message);
        this.setState({
        	message: ''
            });
        }
        
        
	render() {
    return (
    	<div>
        <h1> 이벤트 연습 </h1>
        <input 
        type = "text"
        name = "ex"
        placeholder = "입력"
        value = {this.state.message}
        onChange = {this.state.message}
        />
        <button onClick={this.handleClick}>확인</button>
         </div>
       );
     }
   }

임의 메서드가 이벤트로 등록되어도 this가 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩하는 작업이 필요합니다.

만약 바인딩 하지 않으면, this 가 undefined를 가리키게 됩니다.

# onKeyPress 이벤트 핸들링

import { Component } from 'react';

class EventPractice extends Component {

	state = {
    	username : '',
    	message : ''
        }
        
    handleChange(e) {
    	this.setState({
        	[e.target.name]: e.target.value
            });
        }
    handleClick() {
    	alert(this.state.message + this.state.message);
        this.setState({
        	username: '',
        	message: ''
            });
        }
    handleKeyPress(e) {
    	if(e.key === 'enter'){
        	this.handleClick();
           }
        }
        
        
	render() {
    return (
    	<div>
        <h1> 이벤트 연습 </h1>
        <input 
        type = "text"
        name = "ex"
        placeholder = "입력"
        value = {this.state.message}
        onChange = {this.state.message}
        />
        
        <input 
        type = "text"
        name = "ex"
        placeholder = "입력"
        value = {this.state.message}
        onChange = {this.handleChange}
        onKeyPress = {this.handleKeyPress}
        />
        <button onClick={this.handleClick}>확인</button>
         </div>
       );
     }
   }

 

정리 : 리액트에서 이벤트를 다루는것은 순수 자바스크립트 or JQuery 를 사용하여 이벤트를 다루는 것과 비슷합니다.

HTML DOM Event 를 알고 있다면 리액트의 컴포넌트 이벤트도 쉽게 다룰 수 있습니다.