사용자가 웹 브라우저에서 DOM요소들과 상호 작용하는 것을 이벤트 라고 합니다.
리액트의 이벤트 시스템은 웹브라우저의 HTML이벤트와 인터페이스가 동일하기 때문에 사용법이 비슷합니다.
* onchange이벤트 추가한 js
import React, { Component } from 'react'; class EventPractice extends Component{ render() { return ( <div> <h1>이벤트 연습</h1> <input type="text" name="message" placeholder="아무거나 입력해보세요." onChange={(e) => {console.log(e.target.value);}} /> </div> ); } } export default EventPractice;
만약 비동기적으로 객체를 참조할 일이 있다면 e.persis()함수를 호출합니다.
* state에 값담기
import React, { Component } from "react"; class EventPractice extends Component { state = { message: '', }; render() { return ( <div> <h1>이벤트 연습</h1> <input type="text" name="message" placeholder="아무거나 입력해보세요." onChange={(e) => { this.setState({ message: e.target.value}); console.log(this.state.message); }} /> <button onClick={() => { alert(this.state.message); this.setState({ message: "" }); }} 확인 </button> </div> ); } } export default EventPractice;
위와 같이 코드를 작성할 경우 가독성이 좋지 않은 문제가 발생합니다. 상황에 따라 다르긴 하지만 코드가 복잡해지는 경우 state에 들어갈 이벤트를 함수로 만들 수 있습니다.
* 함수로 만드는 이벤트 핸들링
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 = () =>{ alert(this.state.message); this.setState({ message: '' }); }
constructor안에 추가할 함수를 선언합니다. bind를 하는 이유는 this를 컴포넌트 자신으로 가리키기 위해서 입니다.
함수로 생성한 이벤트는 this.이벤트함수 의 형태로 불러옵니다.
객체안에서 key를 [ ]로 감싸면 그안에 넣은 레퍼런스가 가리키는 값이 key값으로 사용됩니다.
const name = 'variantKey'; const object = { [ name ] : 'value' } { //결과물 'variantKey' : 'value' }
import React, { useState } from 'react'; const EventPracticeFunc = () => { 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> ) } export default EventPracticeFunc;
참고문서
리액트를 다루는 기술