[리액트(React) Study Log] [Person App-009] Handling Event with Methods
1. JSX 에서의 Event 개요
- nomal javascript 에서 event 를 만들때는 onclick, JSX 에서는 onClick(CamelCase 사용)
- switchNameHandler 함수를 정의하고, JSX 에서 정의된 함수를 사용함.
- <button onClick={this.switchNameHandler}> 형태로 사용하는데, 함수명 뒤에 절대 괄호를 붙이지 말 것.(함수 실행이 아니라 함수 지정을 위해서 사용되는 함수의 reference 만 전달해야 함.) this.switchNameHandler() 형태로 사용하면, 함수를 지정하는게 아니라 즉시 실행되기 때문에 react component 가 mount 되는 과정에서 switchNameHandler 함수가 실행되고, 이 함수는 state 를 변화시키기 때문에, state 가 변화되면 JSX가 re-rendering 되고 다시 switchNameHandler 가 실행되는 무한 루프에 빠지게 됨.
(javascript 에서 함수뒤 괄호는 'execute(실행)' 을 의미.
(단, 함수 지정시 argument 전달이 필요한 경우는 괄호 사용이 필요한 경우도 있음. 이때는 (xxx) => this.switchNameHandler(xxx) 형태로 사용. (this.switchNameHandler(xxx) 형태 사용은 안 됨.)
2. event 지정
<button onClick={this.switchNameHandler}>Switch Name</button>
3. event 함수 정의
- 아직은 실제 기능이 아니라 우선 console 에 찍는 함수 내용을 정의
- state 정의 바로 밑에
switchNameHandler = () => {
console.log('Was clicked!');
}
4. 브라우져와 콘솔 확인
