[React] 이벤트 핸들링(작성중)

1. 리액트의 이벤트 시스템

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하여 사용법이 꽤 비슷하지만 주의해야 할 몇 가지 사항이 있다.

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

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

• HTML의 onclick -> onClick
• onkeyup -> onKeyUp

2) 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌 함수 형태의 값을 전달.

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

• div, button, input, form 등 DOM 요소에는 설정할 수 있지만, 직접 만든 컴포넌트에는 자체적으로 설정할 수 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

`ex)`
  <MyComponent onClick={doSomething} />
    // 클릭할 때 doSomething 함수가 실행되는 것이 아닌 이름이 onClick인 props를 전달해 줄 뿐이다.
  <div onClick={this.props.onClick}>
    // 전달 받은 props를 내부의 DOM 이벤트로 설정

2. 클래스형 컴포넌트 이벤트 핸들링

onChange 이벤트 핸들링

e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화되므로 정보를 참조할 수가 없다. 만약 비동기적으로 이벤트 객체를 참조할 일이 있다면 e.persist() 함수를 호출해 주어야 한다.

`EventPractice.js`
import React, {Component} from 'react';

class EventPractice extends Component {
  state = {
    message: ''
  }
  render() {
    return(
      <div>
      	<h1>이벤트 연습</h1>
      	<input
      		type='text'
      		name='message'
      		placeholder='아무거나 입력'
      		value={this.state.message}
      		onChange={(e) =>{
      			this.setState({
                  message: e.target.value
                  })
    			}}
  		/>
      </div>
	);
  }
}

export default EventPractice;

`App.js`
import EventPractice from './EventPractice';

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

export default App;