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

4.2.1 컴포넌트 생성 및 불러오기

4.2.1.1 컴포넌트 생성

• EventPractice.js 파일 생성 - 일단 클래스형으로

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
      </div>
    );
  }
}

export default EventPractice;

4.2.1.2 App.js에서 EventPractie 렌더링

import React from 'react';
import EventPractice from './EventPractice';

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

export default App;

4.2.2 onChange 이베트핸들링하기

4.2.2.1 onChange 이벤트 설정

• EventPractice 컴포넌트에 input 요소를 렌더링하는 코드와 해당 요소에 oChange 이벤트를 설정하는 코드 작성

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

• e.target.value < 입력 한 문자 표사
• e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체

4.2.2.2 state에 input 값 담기

  state = {
    message: '',
  };

<input
          type="text"
          name="message"
          placeholder="아무거나"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
            console.log(e.target.value);
          }}
        />

4.2.2.3 버튼을 누를 때 comment 값을 공백으로 설정

• 입력한 state에 값이 잘 들어갔는지, 인풋에 그 값을 제대로 반영하는지 검증

 <button
          onClick={() => {
            alert(this.state.message);
            this.setState({
              message: '',
            });
          }}
        >
          확인
        </button>

• 확인 버튼을 눌렀을 때 입력한 값이 alert로 출력되면 잘 들어간 것

4.2.3 임의 메서드 만들기

• 이벤트 처리할 때 렌더리을 하는 동시에 함수를 만들어 전달 해주는 방법 대신 함수를 미리 준비하여 전달하는 방법도 있다.
• 성능상 차이는 거의 없지만 가독성은 훨씬 높다.

• onChange와 onClick에 전달한 함수를 따로 빼내서 컴포넌트 임의 메서드 생성

4.2.3.1 기본방식

 <input
          type="text"
          name="message"
          placeholder="아무거나 입력"
          value={this.state.message}
          onChange={this.handleChange}
        />
        <button onClick={this.handleClick}>확인</button>

• 함수가 호출될 때 this.는 호출부에 따라 결정
• this를 컴포넌트 자신으로 제대로 가리키기 위해 메서드를 this와 바인딩 하는 작업 필요
• 바인딩하지 않으면 this는 undefined를 가리킨다

4.2.3.2 Property Initializer Syntax를 사용한 메서드 작성

• 메서드 바인딩은 생성자 메서드에서 하는 것이 정석
• 하지만 새 메서드를 만들때 마다 constructor도 수정 하기 때문 불편할 수 있다. 이 작업을 좀 더 간단하게 하는 방법이 바벨의 transform-class-properties 문법을 사용하여 화살표 함수 형태로 메서드를 정의 하는 것

  // 4.2.3.2
  handleChange = (e) => {
    this.setState({
      message: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.message);
    this.setState({
      message: '',
    });
  };

• 훨씬 깔끔해진다.. ...