리액트 이벤트 onChange 다루기

리액트 이벤트 onChange

리액트를 다루는 기술

 리액트를 공부해야겠다고 결심하고 곧바로 도서관에서 책을 대출해 왔다.

 리액트 문법이나 특징을 전혀 모르는 상태는 아니지만, 책 하나 잡고 챕터 하나씩 따라 하며 빠르게 예제를 따라 하다 보면 의외로 여러 가지 저자의 노하우나 기본기를 탄탄히 다질 수 있다.

 

 공부하다가 자주 사용할 만한 예제들을 기록해 놓고 훗날에 잊을 때마다 꺼내보고자 포스팅한다.

 

input 요소를 랜더링 하는 코드와 해당 요소에 onChange 이벤트를 설정하는 코드를 작성하고 onChange 이벤트 부분에 e를 인자로 받아 target.value 콘솔로르 함수로 찍어본다.

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);
                   console.log(e.target.value);
                   //console.log();
                 }
               }
        />
      </div>
    );
  }
}

export default EventPractice;

내가 기억하고 싶은 부분은 e.target.value 다.

console.log(e)를 찍어 보면 target 요소가 있으며 해당 요소를 클릭해서 풀어보면 value가 있다.

실전에서는 유저가 입력한 특정 값들을 실시간 또는 이벤트가 끝난 후, 서버에 데이터를 전송할 때 체크하는 경우가 다반사다.

 

이제 constructor에 state 값을 초기화하고 이벤트 핸들링 함수 내부에서 this.setState 메서드를 호출해 state를 업데이트해본다. 리액트용 변수를 곁들여서 코딩~

import React, { Component } from "react";

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

export default EventPractice;

이제 리액트 state의 message에 input Box에 입력한 값이 잘 저장 되었는지 확인해보는 코딩을 해본다.

import React, { Component } from "react";

class EventPractice extends Component {
    state = {
        message:""
    }
  render() {
    return (
      <div>
        <h1>이벤트 연습3</h1>
        <input type="text"
               name="message"
               placeholder="아무거나 입력해 보세요"
               value = {this.state.message}
               onChange={
                 (e) =>{
                   this.setState({
                       message: e.target.value
                   })
                 }
               }
        />
          <button onClick={
              ()=>{
                  alert(this.state.message)
                  this.setState({
                      message:''
                  })
              }
          }>확인</button>
      </div>
    );
  }
}

export default EventPractice;

안녕하세요. 를 입력하고 확인 버튼을 클릭하면 코딩한 대로 alert 박스가 실행되면서 입력한 값 "안녕하세요"가 팝업된다.

실제 어플리케이션을 만들때면 리액트 state를 자주 이용할 수 밖에 없을 거 같은 예감이든다.

어차피 자바스크립트이기는 한데, 어쨌든 나중에 헤매지 않게 적어 둔다.