[React] 이벤트

input 요소를 이용해서 console 및 alert 해보려 한다.

우선 함수의 형태의 값을 전달을 위한 메서드 생성

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
		});
		console.log("changing : "+this.state.message);
	}

	handleClick() {
		console.log(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>
		);
	}
}

 

위와 같은 형태는 아래와 같이 화살표 함수를 이용해서 더 깔끔하게 고칠 수 있다.

class EventPractice extends Component {
	state = {
		message: ''
	}

	handleChange = (e) => {
		this.setState({
			message: e.target.value
		});
		console.log("changing : "+this.state.message);
	}

	handleClick = () => {
		console.log(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>
		);
	}
}

---

import React, { Component } from "react";

class EventPractice extends Component {
  state = {
    username: "",
    message: "",
  };

  handleChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value, // 객체 안에 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가르키는 실제 값이 key 값으로 사용
    });
    console.log("changing : " + this.state.message);
  };

  handleClick = () => {
    console.log(this.state.username + ": " + this.state.message);
    this.setState({
      username: "",
      message: "",
    });
  };

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

  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="username"
          placeholder="사용자명"
          value={this.state.username}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력하세요"
          value={this.state.message}
          onChange={this.handleChange}
          onKeyPress={this.handleKeyPress}
        />
        <button onClick={this.handleClick}>확인</button>
      </div>
    );
  }
}

메서드를 이용하여 사용자명과 텍스트를 input 하는 형태가 있고 setState 를 통해서 즉각 변화 하는 것을 옮겨 담는다. 또한, 코드를 보게되면 keyPress === 'Enter' 부분으로 꼭 확인버튼이 아니어도 console.log로 나올 수 있게끔 하는 것도 있다. 위의 코드를 자세히 보게 되면 이해가 가는 부분이 있을 것이다.

 

import React, { useState } from "react";

const EventPractice = () => {
  const [form, setForm] = useState({
    username: "",
    message: "",
  });
  const { username, message } = form;
  const onChange = (e) => {
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사한 뒤
      [e.target.name]: e.target.value, // 원하는 값을 덮어 씌우기
    };
    setForm(nextForm);
    console.log(nextForm.message); // 즉시 반응 하는 걸 보게 한다
  };

  const onClick = () => {
    alert(username + ": " + message);
    setForm({
      username: "",
      message: "",
    });
  };
  const onKeyPress = (e) => {
    if (e.key === "Enter") {
      onClick();
    }
  };
  return (
    <div>
      <h1>이벤트 연습</h1>
      <input
        type="text"
        name="username"
        placeholder="사용자명"
        value={username}
        onChange={onChange}
      />
      <input
        type="text"
        name="message"
        placeholder="아무거나 입력하세요"
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};

위에 있던 코드를 함수형 함수로 변화를 주면서 useState를 사용을 하게 되었다.

[React] state 기존에 적었던 State를 보는 것이 도움

 

중간에 console.log에 적힌 것을 보게 되면, useState를 이용해서 값이 계속 바뀌는 것을 볼 수 있는데, 그 값을 통해서 녹색창에 검색하는 것과 같이 연관 검색어를 보여준다던가 그러한 것을 할 수 있을 거 같다.