ReactJS - 이벤트 핸들링

이벤트 핸들러 적용

클래스형

 class EventPractice extends Component {
 	state = {
    	message : ''
    }
    
    render() {
    	return (
        	<div>
            	<input value={this.state.message} onChange= (e) => {this.setState({message :e.target.value})} /> 
            <div>
        ) 
    }
 }

함수형 컴포넌트

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

커스텀 이벤트 함수

클래스형 컴포넌트

• this 바인딩

 class EventPractice extends Component {
 	state = {
    	message : ''
    }
    
    constructor(props) {
    	super(props);
        this.handleChange = this.handleChange.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleChange(e) {
    	this.setState({message :e.target.value})
    }
    
    handleClick() {
    	this.setState({message : ''})
    }
    
    render() {
    	return (
        	<div>
            	<input value={this.state.message} onChange={handleChange} /> 
                <button onClick={this.handleClick}>초기화</button>
            <div>
        ) 
    }
 }

• 화살표 함수

 class EventPractice extends Component {
 	state = {
    	message : ''
    }
    
    // 화살표 함수를 사용 함으로써 constructor 생략 가능
   
    handleChange(e) => {
    	this.setState({message :e.target.value})
    }
    
    handleClick() => {
    	this.setState({message : ''})
    }
    
    render() {
    	return (
        	<div>
            	<input value={this.state.message} onChange={handleChange} /> 
                <button onClick={this.handleClick}>초기화</button>
            <div>
        ) 
    }
 }

• 여러개의 input 데이터

 class EventPractice extends Component {
 	state = {
    	username : '',
    	message : ''
    }
    
    // 화살표 함수를 사용 함으로써 constructor 생략 가능
   
    handleChange(e) => {
    	this.setState({[e.target.name] :e.target.value})
    }
    
    handleClick() => {
    	this.setState({
            username : '',
        	message : ''
        })
    }
    
    render() {
    	return (
        	<div>
                 <input name="username" value={this.state.username} onChange={this.handleChange} /> 
            	<input name="message" value={this.state.message} onChange={this.handleChange} /> 
                <button onClick={handleClick}>초기화</button>
            <div>
        ) 
    }
 }

함수형 컴포넌트

const EventPractice = () => {
	const [username, setUsername] = useState('');
    const [message, setMessage] = useState('');
    
    handleChangeUsername(e) => setUsername(e.target.value);
    handleChangeMessage(e) => setUsername(e.target.value);
    
    handleClick() => {
    	setUsername('')
        setMessage('')
    }
    
    return (
        	<div>
                 <input name="username" value={username} onChange={handleChangeUsername} /> 
            	<input name="message" value={message} onChange={handleChangeMessage} /> 
                <button onClick={handleClick}>초기화</button>
            <div>
        ) 
}

• 여러개의 input 데이터

const EventPractice = () => {
	const [form, setForm] = useState({
    	username : '',
        message : ''
    });
    
    const [username, message] = form;
    
    handleChange(e) => {
        // 객체 사본 (깊은 복사)
    	const newForm = {
        	...form,
            [e.target.name] : e.target.value
        }
        
        setForm(newForm);
    };
    
    handleClick() => {
    	setForm({
       		username : '',
        	message : ''
        })
    }
    
    return (
        	<div>
                 <input name="username" value={username} onChange={handleChangeUsername} /> 
            	<input name="message" value={message} onChange={handleChangeMessage} /> 
                <button onClick={handleClick}>초기화</button>
            <div>
        ) 
}

이벤트 사용 시 주의사항

• 이벤트 이름은 camelCase 표기법으로 작성
• 이벤트를 전달할 때는 함수 형태의 객체를 전달
• 이벤트는 DOM요소에만 적용 가능

이벤트 종류

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• UI
• Wheel
• Image
• Animation
• Transition