[React 기초 문법] #4 event handling(이벤트 핸들링)

이벤트란?

 

사용자가 웹에서 DOM 요소들과 상호 작용하는 것을 event라고 한다.

 

사용법은 HTML에서 이벤트를 작성한것과 유사하나 몇가지 차이점이 있다. 

 

이벤트 이름은 카멜케이스로 작성함.
DOM요소에만 이벤트를 설정할 수 있음.(component에 직접적으로 이벤트를 설정 할 수 없음.)

 

자주 쓰는 이벤트 핸들링(input tag와 onChange)

 

클래스형 component ver.

import React, { Component } from "react";

class App extends Component {
  state = {
    name: "",
  };

  render() {
    return (
      <input
        type="text"
        name="name"
        placeholder="your name"
        value={this.state.name}
        onChange={(e) => {
          this.setState({
            name: e.target.value,
          });
        }}
      />
    );
  }
}

export default App;

함수형 component ver.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("");

  return (
    <input
      type="text"
      name="name"
      placeholder="your name"
      value={name}
      onChange={(e) => {
        setName(e.target.value);
      }}
    />
  );
}

export default App;

 

자주 쓰는 이벤트 핸들링(input tag/button tag와 onKeyPress)

클래스형 component ver.

import React, { Component } from "react";

class App extends Component {
  state = {
    name: "",
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleClick = () => {
    alert(this.state.name);
    this.setState({
      name: "",
    });
  };

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

  render() {
    return (
      <>
        <input
          type="text"
          name="name"
          placeholder="your name"
          value={this.state.name}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
        />
        <button onClick={this.handleClick}>click</button>
      </>
    );
  }
}

export default App;