[React] 리액트 이벤트 핸들링 예시

(e) => { } 괄호 속 e가 뭔지도 모르고 쓰고 있었다...
e는 이벤트 객체를 의미한다고 한다.

JavaScript에서 이벤트가 발생했을 때 브라우저에서 자동으로 생성되어 이벤트 핸들러 함수에 전달되는데, React에서도 동일한 방식으로 작동된다고 한다.

---

• App.jsx에서 EventPractice 렌더링

// EventPractice.jsx
import React, { Component } from 'react';

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

export default EventPractice;

그리고 나서 App 컴포넌트에서 EventPractice를 불러와 렌더링해보자!

// App.jsx
import React from 'react';
import EventPractice from './features/4_EventHandling/EventPractice';

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

export default App;

---

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

// EventPractice.jsx
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);
            }
          }
        />
      </div>
    );
  }
}
 
export default EventPractice;

(+) 만약 비동기적으로 이벤트 객체를 참조할 일이 있다면?

e.persist() 함수를 호출한다.

// EventPractice.jsx의 onChange 수정
onChange={
  (e) => {
    console.log(e.target.value);
  }
}

그럼 값이 바뀔 때마다 바뀌는 값을 콘솔에 기록하는 것을 볼 수 있다.

---

• state에 input 값 담기
  생성자 메서드인 constructor에서 state 초깃값을 설정하고, 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출해 state를 업데이트해 보자. 그다음 input의 value 값을 state에 있는 값으로 설정한다.

코드를 저장하고, 인풋에 아무것이나 입력해 보자. 만약 오류 없이 제대로 입력할 수 있다면, state에 텍스트를 잘 담은 것!

import React, { Component } from 'react';
 
class EventPractice extends Component {
 
  state = {
    message: ''
  }
 
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={
            (e) => {
              this.setState({
                message: e.target.value
              })
            }
          }
        />
      </div>
    );
  }
}
 
export default EventPractice;

---

• 버튼을 누를 때 comment 값을 공백으로 설정
  입력한 값이 state에 잘 들어갔는지, 그리고 인풋에서 그 값을 제대로 반영하는지 한번 확인해 보자.

input 요소 코드 아래쪽에 button을 하나 만들고, 클릭 이벤트가 발생하면 현재 comment 값을 메시지 박스로 띄운 후 comment 값을 공백으로 설정한다.

import React, { Component } from 'react';
 
class EventPractice extends Component {
 
  state = {
    message: ''
  }
 
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          (...)
        />
        <button onClick={
          () => {
            alert(this.state.message);
            this.setState({
              message: ''
            });
          }
        }>확인</button>
      </div>
    );
  }
}
 
export default EventPractice;

alert를 사용해 현재 message 값을 화면에 표시하게 함.