[React] 임의 메서드 만들기

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 그래서 이벤트를 처리할 때 렌더링을 하는 동시에 함수를 만들어서 전달해 줬다.

이 방법 대신 함수를 미리 준비하여 전달하는 방법도 있다. 성능상으로는 차이가 거의 없지만, 가독성은 훨씬 높다.(상황에 따라 렌더링 메서드 내부에서 함수를 만드는 게 더 편할 수도 있음)

• 앞서 onChange와 onClick에 전달한 함수를 따로 빼내서 컴포넌트 임의 메서드를 만들어 보자.

  • 기본 방식

    // EventPractice.js
    import React, { Component } from 'react';
    
    class EventPractice extends Component {
    
    state = {
     message: ''
    }
    
    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: ''
     });
    }
    
    render() {
     return (
       <div>
         <h1>이벤트 연습</h1>
         <input
           type="text"
           name="message"
           placeholder="아무거나 입력해 보세요"
           value={this.state.message}
           onChange={this.handleChange}
         />
         <button onClick={this.handleClick}>확인</button>
       </div>
     );
    }
    }
    
    export default EventPractice;

함수가 호출될 때 this는 호출부에 따라 결정되므로, 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this의 관계가 끊어져버림.

이 때문에 임의 메서드가 이벤트로 등록되어도 this를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this와 바인딩(binding)하는 작업이 필요하다.

만약 바인딩하지 않는 경우라면 this가 undefined를 가리키게 된다. 현재 constructor 함수에서 함수를 바인딩하는 작업이 이루어지고 있다.