리액트를 다루는 기술 요약- 이벤트 핸들링

유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 합니다.

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷합니다.

다만, 주의사항

1. 이벤트 이름은 camelCase로 작성 ex) onclick -> onClick

2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달

3. DOM 요소에만 이벤트를 설정할 수 있음

 

이벤트 핸들링

EventPractice.js

import React, { Component } from "react";

class EventPractice extends Component{
    render(){
     return(
        <div>
         <h1>이벤트 연습</h1>
         <input //input 요소를 렌더링하는 코드
          type="text"
          name="message"
          placeholder="입력"
          onChange={
              (e)=>{
                  console.log(e);
              }
          }
         />
        </div>
        
      );
    }
}

export default EventPractice;

여기서 콘솔에 기록되는 e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체

 

state에 input 값 담기

import React, { Component } from "react";

class EventPractice extends Component{

    state={
        message:''
    }

    render(){
     return(
        <div>
         <h1>이벤트 연습</h1>
         <input //input 요소를 렌더링하는 코드
          type="text"
          name="message"
          placeholder="입력"
          value={this.state.message}
          onChange={
              (e)=>{
                  this.setState({
                    message: e.target.value
                  })
              }
          }
         />
        </div>
        
      );
    }
}

export default EventPractice;