Techniques for dealing with REACT_eventHandling

• 이벤트 : 사용자가 웹브라우저에서 DOM요소들과 상호작용하는 것.
  예를들면, 버튼에 마우스커서 올렸을 때 onMouseOver이벤트 실행시키고,
  클릭했을때는 onClickEvent
  Form 요소는 값이 바뀔 때 onChangeEvent

11. 이벤트 사용시 주의할 점

1. 카멜표기법
	- onClick, onKeyUp, onChange ...
2. 이벤트에 실행할 자바스크립트코드를 전달하는 것이 아니라 함수형태의값을 전달한다.
	- ""(X), 함수형태의 객체로 전달 () => {}
3. DOM 요소에만 이벤트 설정할 수 있다.
	- div, button, input, form, span 등의 DOM요소에 이벤트 설정 가능
    - 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정 못한다.
    	예를들면, <MyComponent onClick={doSomething} />
        이렇게 되면 MyComponent를 클릭할때 doSomething함수를 실행하는 것이 아니라
        그냥 이름이 onClick인 props를 MyComponent에게 전달해주는 것 뿐이다.
    - 하지만, 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다.
    	<div onClick={this.props.onClick}>
          (...)
        </div>

12. 이벤트핸들링

(1) 컴포넌트 생성 및 불러오기
(2) onChange이벤트 핸들링하기
(3) 임의 메소드 만들기
(4) input 여러개 다루기
(5) onKeyPress이벤트 핸들링하기

• EventPractice.js

import React, {useState} from 'react';


const EventPractice = () => {
  
  const [userName, setUserName] = useState('');
  const [message, setMessage] = useState('');
  const onChangeUserName = (e) => {
    setUserName(e.target.value)
  }
  const onChangeMessage = (e) => {
    setMessage(e.target.value)
  }
  const onClick = () => {
    alert(userName + ': ' + message);
    setUserName('');
    setMessage('');
  }
  const onKeyPress = () => {
    if(e.key === 'Enter') {
      onClick();
    }
  }
  
  
  return (
    <>
      <h1> 이벤트 연습 </h1>
      <input
    	type='text'
    	name='userName'
    	placeholder='사용자명'
    	value={userName}
		onChange={onChangeUserName}
      />
      <input 
		type='text'
		name='message'
		placeholder='아무거나 입력해보세요'
		value={message}
		onChange={onChangeMessage}
		onKeyPress={onKeyPress}
	  />
      <button
		onClick={onClick}
	  >
    	확인
      </button>
    </>
  )
}

export default EventPractice;

• 위 코드 그대로 useState 사용하여 문자열이 아닌 객체를 넣기

import React, {useState} from 'react';

const EventPractice = () => {
  
  const [form, setForm] = useState({
    userName: '',
    message: ''
  })
  const {userName, message} = form;
  const onChange = (e) => {
    const nextForm = {
      ...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>
       <h1>이벤트연습</h1>
       <input
    	type='text'
    	name='userName'
    	placeholder='사용자명'
    	value={userName}
		onChange={onChange}
      />
      <input 
		type='text'
		name='message'
		placeholder='아무거나 입력해보세요'
		value={message}
		onChange={onChange}
		onKeyPress={onKeyPress}
	  />
      <button
		onClick={onClick}
	  >
    	확인
      </button>
    </div>
  )
}