2020-12-07 :: Event Handling

리액트의 이벤트 시스템

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

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

2. 이벤트 실행을 지정할 때 자바스크립트 코드가 아닌 함수 형태의 값을 전달한다.

3. DOM요소에만 이벤트를 적용할 수 있다.

   ⇒ 컴포넌트에 자체적으로 이벤트를 설정할 수는 없다. 하지만 전달받은 props를 컴포넌트 내부의 DOM이벤트로 설정할 수는 있다.

예제로 이벤트 핸들링 익히기

**onChange = { (e) => { console.log(e.target.value); } }**

e 객체는 SyntheticEvent로 웹 브러우저의 네이티브 이벤트를 감싸는 개체이다. 입력값을 추출하고 싶다면 e.target.value를 통해 접근하도록 하자.

state에 input 담기 & 버튼을 누를 때 message 값을 공백으로 설정

<> <input type="text" name="user" **value={this.state.message}** placeholder="Enter your name" onChange = { (e) => { this.setState({ message: e.target.value, })} } /> <button onClick = { () => { alert(this.state.message); **this.setState({message:''});** }} >Go!</button> </>

input 태그 안의 value 값을 state와 연결시켜 button 클릭 이후에 값이 최신화 되도록 한다.

메서드 바인딩

constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ message: e.target.value, }); }

함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 매서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져 버린다. 이 때문에 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 가리키기 위해서는 메서드를 this와 바인딩하는 작업이 필요하다.

하지만 화살표 함수로 정의하면 모든 문제는 해결된다. 위의 복잡한 코드를 굳이 입력할 필요가 없다. 차이는 기존 함수 형태와 화살표 함수 자체에서 발생하고 바벨의 transform-class-properties 문법과 연관이 있단다..🤷

input 여러 개 다루기

handleChange = (e) => { this.setState({ **[e.target.name]: e.target.value,** }); } handleClick = ( ) => { alert(this.state.user + ': ' + this.state.message); this.setState({ user: '', message: '', }); }

볼드로 하이라이트한 부분이 핵심이다. 객체 안에서 Key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key값으로 사용된다.

onKeyPress 이벤트 핸들링

handleKeyPress = e => { if(e.key === 'Enter') { this.handleClick(); } }

e.key로 값에 접근하면 된다!