4. Event Handling

hixkix59·2021년 11월 13일
0

React_Basic

목록 보기
3/8
post-thumbnail

event : 웹 브라우저에서 DOM 요소와 상호작용

리액트 Event 시스템

주의 사항

  1. camelCase로 이벤트 이름 작성
  2. 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달
  3. DOM 요소에만 이벤트 설정 가능
    div, button, input,form, span 등 DOM 요소에 event 설정 가능
    직접 만든 자체적 컴포넌트에는 이벤트 설정 불가능
    <MyComponent onClick={doSomething}/>
    : doSomething 함수 실행 X, 그냥 이름이 OnClick인 것을 전달 받음
    전달 받은 props를 컨포넌트 내부 DOM 이벤트로 설정 가능

이벤트 종류

React Event Handling Doc
https://reactjs.org/docs/events.html


이벤트 핸들링 익히기

1. 컴포넌트 생성

src/EventPractice.js 생성해 컴포넌트 초기 코드 작성

import React,{Component} from 'react';
class EventPractice extends Component{
    render(){
        return (
            <div>
                <h1>이벤트 연습</h1>
            </div>
        )
    }
}
export default EventPractice;

2. 컴포넌트 불러오기

App.js에서 EventPractice.js 파일 import 해서 랜더링

import './App.css';
import React,{Component} from "react";
import EventPractice from './EventPractice'; 
/*EventPractice 파일에서 EventPractice라는 이름으로 Component 불러오기 */

class App extends Component{
  render(){
    return (
     <EventPractice/>
    )
  }
}

export default App;

3. 랜더링 결과

onChange 이벤트 핸드링

1. onChange 이벤트 설정

흐름
1. EventPractice 컴포넌트에 다음의 코드 작성
input 요소 랜더링 코드
onChange 이벤트 설정 코드

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 :
    이벤트 객체로 SyntheticEvent
    네이티브 이벤트와 인터페이스가 같음
    -> 바닐라 js에서 HTML 이벤트 핸들링과 동일
    console 결과 :
  • onChange 이벤트 발생시, e.target.value 이용해 변하는 input값 콘솔 출력 코드
    onChange={
        (e)=>{
            console.log(e.target.value);
        }
    }

console 결과 :

2. state에 input 값 담기

흐름
1. constructor인 생성자 메서드에 state 초깃값 설정
2. 이벤트 핸들링 함수 내부에서 this.setState 메서드 호출
3. state 업데이트
4. input의 value를 state에 할당된 값으로 설정

import React,{Component} from 'react';

class EventPractice extends Component{

    //1. state 초깃값 설정
    state={
        msg : ""
    }

    render(){
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하시오"
                    value={this.state.msg}
                    onChange={ //2.이벤트 핸들링 함수 내부에서 this.setState 메서드 호출
                        (e)=>{ //3. state 업데이트
                            this.setState({                             
                                msg : e.target.value 
                                //4.input의 value를 state에 할당된 값으로 설정
                                
                            })
                        }
                    }
                />
            </div>
        )
    }
}

export default EventPractice;

3. 버튼 누를 때 comment 값 공백으로 설정

입력한 값이 state에 할당되었는지, input에서 그 값 반영하는지 확인

흐름
1. input 요소 아래에 button 생성
2. click 이벤트 발생시 comment 값 메시지 박스로 띄우기
3. comment 값을 공백으로 설정

(...)
 {/*1. input 요소 아래 버튼 생성*/}
    <button onClick={
        ()=>{
            alert(this.state.msg); 
            //2. click 이벤트 발생 시 alert 사용해 comment 값 메시지 박스 띄우기
            this.setState({
                msg:""
            });
            //3. comment 값 공백으로 설정
        }
    }>확인</button>
(...)

임의 메서드 만들기

함수 미리 만들어서 전달 : 가독성 좋음

1. 기본 공식

흐름
1. 컴포넌트 생성자 메소드 constructor
: 각 메서드를 this와 바인딩 -> 메소드에서 this 사용 가능하도록!
2. handleClickhandleChange 함수 작성
3. onChangeonClick 이벤트에 함수 전달

import React,{Component} from 'react';

class EventPractice extends Component{

    //1-1. 컴포넌트 생성자 메소드 
    constructor(props){
        super(props);
        //msg 초기값 설정
        this.state={msg:""} 
        //1-2. 각 메서드를 this와 binding -> this에서 사용 가능하도록
        this.handleClick=this.handleClick.bind(this);
        this.handleChange=this.handleChange.bind(this);
        
    }
    //2-1. handleChange 함수 작성
    handleChange(e){
        this.setState({                             
            msg : e.target.value //4.input의 value를 state에 할당된 값으로 설정
            
        })
    }
    //2-2. handleClick 함수 작성
    handleClick(){
        alert(this.state.msg); 
        this.setState({
            msg:"" //comment 값 공백으로 설정
        });

    }

    render(){
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력하시오"
                    value={this.state.msg}
                    //3-1. onChange 이벤트에 handleChange 함수 전달
                    onChange={this.handleChange}
                />
                {/*input 요소 아래 버튼 생성*/ }
                {/*3-2. onClick 이벤트에 handleClick 함수 전달*/}
                <button onClick={this.handleClick}>확인</button>

            </div>
        )
    }
}

export default EventPractice;

2. Property Initializer Syntax 사용한 메서드 작성

위의 1. 기본 공식 처럼 작업 시 매번 constructor 수정해야 하는 번거로움 발생
화살표 함수 형태로 메서드 정의 : 더 편리함

    state={ //1. msg 초기값 설정
        msg:""
    }

    //2-1. handleChange 화살표 형태 함수 
    handleChange=(e)=>{
        this.setState({                             
            msg : e.target.value 
            //input의 value를 state에 할당된 값으로 설정
            
        })
    }
    //2-2. handleClick 화살표 형태 함수
    handleClick=()=>{
        alert(this.state.msg); 
        this.setState({
            msg:"" 
            //comment 값 공백으로 설정
        });

    }

여러개 input 핸들링

event 객체인 e.target.name 이용
태그의 name 속성 이용

import React,{Component} from 'react';

class EventPractice extends Component{

    state={ //1. msg와 username 초기값 설정
        msg:"",
        username:""
    }

    //2-1. handleChange 화살표 형태 함수 
    handleChange=(e)=>{
        this.setState({                             
            [e.target.name] : e.target.value 
            //input의 name에 맞는 value값을 state의 값으로 설정
            
        })
    }
    //2-2. handleClick 화살표 형태 함수
    handleClick=()=>{
        alert(this.state.username+ " : "+ this.state.msg ); 
        this.setState({
            msg:"" ,//comment 값 공백으로 설정
            username:""
        });

    }

    render(){
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="username" /*input의 name 값 -> setState에 전달됨*/
                    placeholder="유저명"
                    value={this.state.username}
                    //3-1. onChange 이벤트에 handleChange 함수 전달
                    onChange={this.handleChange}
                />

                <input
                    type="text"
                    name="msg" /*input의 name 값  -> setState에 전달됨*/
                    placeholder="아무거나 입력하시오"
                    value={this.state.msg}
                    //3-1. onChange 이벤트에 handleChange 함수 전달
                    onChange={this.handleChange}
                />
                {/*input 요소 아래 버튼 생성*/ }
                {/*3-2. onClick 이벤트에 handleClick 함수 전달*/}
                <button onClick={this.handleClick}>확인</button>

            </div>
        )
    }
}

export default EventPractice;

onKeyPress 이벤트 핸들링

키 눌렀을 때 이벤트 발생
e.key, onKeyPress, === 이용


1. enter 키 눌렀을 때 handleClick 메서드 호출 코드

import React,{Component} from 'react';

class EventPractice extends Component{

    state={ //1. msg와 username 초기값 설정
        msg:"",
        username:""
    }

    //2-1. handleChange 화살표 형태 함수 
    handleChange=(e)=>{
        this.setState({                             
            [e.target.name] : e.target.value 
            //input의 name에 맞는 value값을 state의 값으로 설정
            
        })
    }
    //2-2. handleClick 화살표 형태 함수
    handleClick=()=>{
        alert(this.state.username+ " : "+ this.state.msg ); 
        this.setState({
            msg:"" ,//comment 값 공백으로 설정
            username:""
        });
    }

    //2-3. handleKey 함수 작성 : Enter 키 누르면 handleClick 함수 실행
    handleKeyPress=(e)=>{
        if(e.key==="Enter"){
            this.handleClick();
        }
    }

    render(){
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="username" /*input의 name 값 -> setState에 전달됨*/
                    placeholder="유저명"
                    value={this.state.username}
                    //3-1. onChange 이벤트에 handleChange 함수 전달
                    onChange={this.handleChange}
                    //3-2. onKeyPress 이벤트에 handleKeyPress 함수 전달
                    onKeyPress={this.handleKeyPress}
                />

                <input
                    type="text"
                    name="msg" /*input의 name 값  -> setState에 전달됨*/
                    placeholder="아무거나 입력하시오"
                    value={this.state.msg}
                    //3-1. onChange 이벤트에 handleChange 함수 전달
                    onChange={this.handleChange}
                    //3-2. onKeyPress 이벤트에 handleKeyPress 함수 전달
                    onKeyPress={this.handleKeyPress}
                />
                {/*input 요소 아래 버튼 생성*/ }
                {/*3-3. onClick 이벤트에 handleClick 함수 전달*/}
                <button onClick={this.handleClick}>확인</button>

            </div>
        )
    }
}

export default EventPractice;
'''

0개의 댓글