React 리액트 이벤트 핸들러들

---

React 리액트 이벤트 주의사항 3

 

1. HTML 기존 형식을 카멜식 표기로 변경해서 사용

onclick => onClick
onkeyup => onKeyUp

2. ""안에 바로 함수를 쓰는 게 아니라, 실행할 "이벤트 함수”를 {}안에 전달

HTML 이벤트

onclick = “alert(‘hi’)”

리액트 이벤트

// 바로 함수
onClick = { (e) => { console.log(e); } } 
// 혹은 {} 안에 미리정의된 함수명
onClick = { showMessage }

 

3. 사용자 컴포넌트에는 이벤트 불가능

• 기존 HTML DOM 요소에만 이벤트를 붙일 수 있다
• 직접 만든 사용자 컴포넌트에는 이벤트 입력 불가능
• 가령 <MyComp onClick={실행함수} /> 이렇게 쓴다고 해도 onClick이라는 이름을 가진 props으로 전달이 됨. 이벤트로 인식 불가
• 리액트 props 문법을 응용하여 이벤트처럼 활용은 가능

// 부모 컴포
// 자식 컴포 호출시 props로 onClick함수 세팅
<MyComp onClick={showMeTheMoney} />

// 자식 컴포(MyComp) 내부
<button onClick={this.props.onClick}>쇼미더머니</div>

---

React 리액트 이벤트 종류

React 리액트 이벤트 공식 매뉴얼

SyntheticEvent – React

 

React 리액트 이벤트 카테고리

 

• Clipboard Events
• Composition Events
• Keyboard Events
• Focus Events
• Form Events
• Generic Events
• Mouse Events
• Pointer Events
• Selection Events
• Touch Events
• UI Events
• Wheel Events
• Media Events
• Image Events
• Animation Events
• Transition Events
• Other Events
  
  

React 리액트 예제

 

1. 인풋값 콘솔에 찍기

자식 컴포넌트 (이벤트 세팅)

import React, { Component } from 'react';

class EventPractice extends Component {
  render(){
    return(
      <div>
        <input 
          type="text"
          name="message"
          placeholder="입력해보세요"
          onChange = {
            (e) => { console.log(e.target.value); }
          }
        />
    );
  }
}
export default EventPractice;

부모 컴포넌트 (불러오기)

import React from 'react';
import EventPractice from './EventPractice';

const App = () => {
  return <EventPractice />
};
export default App;

* 기본적으로 이벤트 리턴값에 e 를 써줄 경우 리액트의 이벤트 객체가 전체가 반환된다. 콘솔창에서 객체를 출력해봤을 때 input 박스 내부에 적힌 사용자 텍스트는 e.target.value의 값으로 지정되어 있었다.

2. 인풋값 state에 넣기 + 버튼클릭 알림창

자식 컴포넌트 (EventModule.js)

import React, { Component } from ‘react’;
class EventModule extends Component{
  state = {
    inputVal: ‘’
  }
  render(){
    return(
      <>
        <input
          type=“text”
          name=“inputVal”
          placeholder=“입력”
          value={this.state.inputVal}
          onChange={
            (e) => {
              this.setState({
                inputVal: e.target.value
              });
            }
          }
        />
        <button onClick={
          () => {
            alert(this.state.inputVal);
            //state 리셋
            this.setState({
              inputVal: ‘’
            });
          }
         }>확인</button>
      </>
    );
  }
}
export default EventModule;

부모 컴포넌트 (App.js)

import React from 'react';
import EventModulenfrom './EventModule';

const App = () => {
  return <EventModule />
};
export default App;

3. 메서드로 별도 정의

3.1. 리액트 이벤트 메서드: 화살표 함수로 (Property Initializer Syntax)

import React, { Component } from 'react';

class EventModule extends Component {
  state = {
    inputVal: ''
  }
  handleChange = (e) => {
    this.setState({
      inputVal: e.target.value
    });
  }
  handleClick = () => {
    alert(this.state.message);
    this.setState({
      inputVal: ''
    });
  }
  render(){
    return(
      <>
        <input 
           type = "text"
           name = "textInput"
           value = {this.state.inputVal}
           onChange = {this.handleClick}
         />
         <button onClick={this.handleClick}>입력값 확인</button>
      </>
    );
  }
}
export default EventModule;

3.2. 리액트 이벤트 메서드: 클래스 constructor 로

import React, { Component } from 'react';

class EventModule extends Component {
  state = {
    inputVal : ''
  }
  // constructor에서 bind 해줘야 함
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }
  // 화살표함수 아니고 일반 함수형태로 정의
  handleChange(e){
    this.setState({
      inputVal: e.target.value
    });
  }
  handleClick(){
    alert(this.state.inputVal);
    this.setState({
      inputVal: ''
    });
  }
  
  render(){
    return (
      <>
        <input
          type = "text"
          name = "textInput"
          value = {this.state.inputVal}
          onChange = {this.handleChange}
        />
        <button onClick={this.handleClick}>입력값 확인</button>
      </>
    );
  }
}
export default EventModule;

 

4. 동적으로 작용하는 공용 setState 만들기

// 동적 변화의 핵심 !!!!
this.setState({
  [ e.target.name ] = e.target.value
});

import React, {Component} from 'react';

class EventModule extends Component {
  state = {
    inputName: '',
    inputMsg: ''
  }
  handleChange = (e) => {
    this.setState({
      // 여기가 동적으로 변함!!! 핵심!!!!
      [e.target.name] = e.target.value
    });
  }
  handleClick = () => {
    alert(this.state.inputName + ' / ' + this.state.inputMsg);
  }
  handleReset = () => {
    this.setState({
      inputName: '',
      inputMsg: ''
    });
  }
  
  render(){
    return({
      <>
        <input
           type = "text"
           name = "inputName"
           onChange = {this.handleChange}
        />
        <input
           type = "text"
           name = "inputMsg"
           onChange = {this.handleChange}
         />
         <button onClick={this.handleClick}>값 확인</button>
         <button onClick={this.handleReset}>리셋</button>
      </>
    });
  }
}
export default EventModule;

 

---

문법 참고

객체({}) 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key값으로 사용된다. 가령 아래 코드는 그 아래와 같이 적용된다. 

let keyName = ‘key001’;
let obj = {
  [keyName] : ‘값이죠’
}

let obj = {
  ‘key001’ : ‘값이죠’
}

---

 

5. onKeyPress 이벤트

*** e.key 로 key값 받아옴

import React, { Component } from ‘react’;

class EventKeyPress extends Component{
  state = {
    name: '',
    msg: ''
  }
  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  }
  handleClick = () => {
    alert(this.state.name + '/' + this.state.msg);
    this.setState({
      name: '',
      msg: ''
    });
  }
  
  // 엔터친 경우 추가부분
  handleKeyPress = (e) => {
    if(e.key === "Entet") {
      this.handleClick();
    }
  }
  
  render(){
    return({
      <>
        <input
           type = "text"
           name = "name"
           onChange = {this.handleChange}
        />
        <input
           type = "text"
           name = "msg"
           onChange = {this.handleChange}
           onKeyPress = {this.handleKeyPress}
         />
         <button onClick={this.handleClick}>확인 및 리셋</button>
      </>
    });
  }
}
export default EventKeyPress;

 

6-1. 함수형 컴포넌트로 변경 (input 개수 적은 경우)

import React, { useState } from 'react';

const Event = () => {
  const [name, setName] = useState('')
  const [msg, setMsg] = useState('');
  const onChangeName = e => setName( name: e.target.value );
  const onChangeMsg = e => setMsg( msg: e.target.value );
  const onClick = () => {
    alert( name + " / " + msg );
    setName('');
    setMsg('');
  };
  const onKeyPress = e => {
    if(e.key === 'Enter') { onClick(); }
  }
  
  render(){
    return({
      <>
        <input
           type = "text"
           name = "name"
           onChange = {onChangeName}
        />
        <input
           type = "text"
           name = "msg"
           onChange = {onChangeMsg}
           onKeyPress = {onKeyPress}
         />
         <button onClick={onClick}>확인 및 리셋</button>
      </>
    });
  }
};

export default Event;

 

6-2. 함수형 컴포넌트로 변경 (input 개수 많은 경우)

 

 

import React, { useState } from 'react';

const Event = () => {
  
  ////////////////////////////////////////////////////////
  
  const [form, setForm] = useState({
    name: '',
    msg: '',
    tel: ''
  });
  const {name, msg, tel} = form;
  
  const onChange = e => {
    const updateForm = {
      ...form,
      [e.target.name] : e.target.value
    };
    setForm( updateForm );
  };
  
  const onClick = e => {
    alert(name + '/' + msg + '/' + tel);
    setForm({
      name: '',
      msg: '',
      tel: ''
    });
  };
  
  ////////////////////////////////////////////////////////
  
  const onKeyPress = e => {
    if(e.key === 'Enter') { onClick(); }
  }
  
  render(){
    return({
      <>
        <input
           type = "text"
           name = "name"
           onChange = {onChange}
        />
        <input
           type = "text"
           name = "msg"
           onChange = {onChange}
         />
         <input
           type = "text"
           name = "tel"
           onChange = {onChange}
           onKeyPress = {onKeyPress}
         />
         <button onClick={onClick}>확인 및 리셋</button>
      </>
    });
  }
};

export default Event;​