3. 이벤트 핸들링 예제

• 주의사항

  • 이벤트 명은 카멜 표기법을 사용한다.
  • 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태 값을 전달한다.
  • DOM 요소에만 이벤트를 설정할 수 있으며, 컴포넌트는 자체적으로 이벤트를 설정할 수 없으며 props를 통해 컴포넌트 내부의 DOM 이벤트로 설정이 가능하다.

  이벤트 종류 보러가기

• onChange 이벤트 핸들링
  • e 객체는 합성이벤트(SyntheticEvent)로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이며, 네이티브 이벤트와 달리 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수 없다.
  • 만약 비동기적으로 이벤트 객체를 참조해야 할 경우 e.persist() 함수를 호출해주어 사용이 가능하나, v17부터 e.persist()는 SyntheticEvent가 더 이상 풀링 되지 않기 때문에 아무런 동작을 하지 않는다.

onChange={(e) => {console.log(e)}}

• state에 input 값 담기

import React, {Component} from 'react';
class EventComponent extends Component{
    state = {message:''}

    render(){
        return (<div>
                    /** 텍스트를 변경 시(값 입력 시) message에 값이 담기게 된다 */
                    <input type="text" name="message" value={this.state.message}
                            onChange={(e) => {this.setState({message : e.target.value})}}/>
                    /** 버튼 클릭 시 텍스트 message를 경고창에 띄워준 후 message를 공백으로 처리한다 */
                    <button onClick = {() => {alert(this.state.message);
                                              this.setState({ message : '' });
                    }}>확인</button>
                </div>);
    }
}
export default EventComponent;

• 임의 메서드 만들기 : 함수를 미리 준비하여 전달하는 방법으로 성능상 차이가 거의 없으며, 가독성이 높다.

import React, {Component} from 'react';
class EventComponent extends Component{
    state = {message:''}
    constructor(props){
        super(props);
        /** 특정 요소의 이벤트로 등록하는 과정에서 메서드와 this와의 관계가 끊어질 수 있기에 바인딩을 수행한다. */
        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>
                    /** 텍스트를 변경 시(값 입력 시) message에 값이 담기게 된다 */
                    <input type="text" name="message" value={this.state.message}
                            onChange={this.handleChange}/>
                    /** 버튼 클릭 시 텍스트 message를 경고창에 띄워준 후 message를 공백으로 처리한다 */
                    <button onClick = {this.handleClick}}>확인</button>
                </div>);
    }
}
export default EventComponent;​

• Property Initializer Syntax를 사용한 메서드 작성 : constructor를 메서드를 만들때마다 작성해야 하기 때문에 화살표 형식으로 메서드를 정의하면 편하게 사용이 가능하다.

import React, {Component} from 'react';
class EventComponent extends Component{
    state = {message:''}
    handleChange = (e) => {
        this.setState({message : e.target.value})
    }
    handleClick = () => {
        alert(this.state.message);
        this.setState({message : ''});
    }
    render(){
        return (<div>
                    /** 텍스트를 변경 시(값 입력 시) message에 값이 담기게 된다 */
                    <input type="text" name="message" value={this.state.message}
                            onChange={this.handleChange}/>
                    /** 버튼 클릭 시 텍스트 message를 경고창에 띄워준 후 message를 공백으로 처리한다 */
                    <button onClick = {this.handleClick}}>확인</button>
                </div>);
    }
}
export default EventComponent;

• handleChange 함수 key, value 형식으로 사용하기

handleChange = (e) => {
    // []로 설정하면 그 안에 넣은 래퍼런스가 가리키는 실제 값이 key로 사용이 된다.
    // 즉 message : 'value입니다.' 형식으로 들어가게 되는 것이다.
    [e.target.name] : e.target.value
    }

• onKeyPress 이벤트 핸들링 : 텍스트박스에서 enter를 치면 handleClick이 실행되어 alert창이 뜨게 된다.

import React, {Component} from 'react';
class EventComponent extends Component{
    handleKeyPress = (e) => {
        if(e.key === 'Enter') this.handleClick();
    }
    handleClick = () => {alert("끄적끄적 개발일기");}
    handle
    render(){
        return (<div>
                    <input type="text" name="message" value={this.state.message} 
                    	   onKeyPress={this.handleKeyPress}/>
                    <button onClick = {this.handleClick}}>확인</button>
                </div>);
    }
}
export default EventComponent;

• 함수 컴포넌트로 구현하기 : e.target.name 값을 활용 시 아래와 같이 useState를 쓸 때 인풋 값들이 들어간 form 객체를 사용하면 된다.

import React, {useState} from 'react';
const EventComponent = () => {
    const [form, setForm] = useState({
        username : '',
        message : ''
    });
    const {username, message} = form;
    const onChange = (e) => {const nextForm = {
    					// 기존의 form 내용을 이자리에 복사
                                        ...form, 
                                        //원하는 값을 덮어씌우기
                                        [e.target.name] : e.target.value    
                                    };
                             setForm(nextForm);
                             }
    const onClick = () => {alert(username + " : " + message);
                           setForm({username : '', message : ''});
                           };
    const onKeyPress = (e) => {if (e.key === 'Enter'){onClick;}}
    return(
    	<div>
        	<input type="text" name="username" value={username} onChange{onChange}/>
        	<input type="text" name="message" value={message} onChange{onChange} 
            	   onKeyPress={onKeyPress}/>
        	<button onClick={onClick}>확인</button>
    	</div>
    )
}