[리액트 스타터1] 4장. 이벤트 핸들링

 

 

---

4장

 

이번장에서는 이벤트를 다루는 방법에 대해서 알아봅니다.

​

​

​

​

HTML에서 DOM 요소에 이벤트를 설정하는 방법은 아래의 코드와 같습니다.

alert함수를 이용해서 메시지 박스를 띄우는 방법으로, 이벤트를 실행하면 "" 사이의 자바스크립트를 실행하는 것이 특징입니다.

<button onclick = "alert('executed')">
     click me
</button> 

 

 

 

 

 

4.1.1 이벤트를 사용할 때 주의 사항

 

• 카멜 표기법
• 함수 형태 값 전달 (자바스크립트 코드 전달X) : HTML과의 차이점
• DOM 요소에만 이벤트 설정 가능 (개발자가 직접 만든 컴포턴트에 자체 이벤트 설정 불가)
  • 전달받은 props를 컴포넌트 내부 DOM 이벤트로 설정

 

 

 

 

 

 

4.1.2. 이벤트 종류

 

다양한 이벤트가 존재하지만, 책에서는 일부만을 다룹니다. 

 

• Clipboard
• Composition
• Keyboard
• Focus
• Form
• Mouse
• Selection
• Touch
• UI
• Whieel
• Media
• Image
• Animation
• Transition

 

 

 

 

 

 

 

 

 

 

 

4.2. 예제로 이벤트 핸들링 익히기

 

컴포넌트 생성 및 불러오기

-> onChange 이벤트 핸들링

-> 임의 메서드 생성

-> input 여러 개 다루기

-> onKeyPress 이벤트 핸들링

 

(하위 과정은 클래스형 컴포넌트를 이용한 과정이며, 함수 컴포넌트를 이용한 과정은 4.3절에 이어서 서술합니다.)

 

 

 

 

• 컴포넌트 생성 및 불러오기

클래스형 컴포넌트를 EventPractice라는 javascript 파일로 생성하면 다음과 같습니다.

// 클래스형 컴포넌트- EventPractice

import React, { Component } from 'react'
class EventPractice extends Component {
    state = {
        username: '',
        message: '',
    }
    handleChange = (e) => {
        this.setState({
        [e.target.name]: e.target.value,
    })
    }
    handleClick = () => {
        alert(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>
        )
    }
}
export default EventPractice

 

이후 App 컴포넌트에서 이를 불러와 랜더링 합니다.

불러오는 import 함수는 아래와 같습니다.

import EventPractice from './EventPractice';

 

브라우저에 이 텍스트를 출력한 화면이 나온다면 성공한 것입니다.

 

 

 

 

• onChange 이벤트 핸들링

onChange 이벤트를 설정하기 위해 Eventpracrtice라는 자바스크립트 파일을 생성해,

render 매서드에 이를 작성해 줍니다.

//EventPractice.js

import React, { Component} from 'react';
class EventPractice extends Compoent{
    render(){
        return(
            <div>
                <h1>이벤트 연습 </h1>
                <input 
                    type = "text"
                    name = "message"
                    placeholder='아무거나입력'
                    onChange={
                        (e) => {                  // 콘솔에 기록되는 e 객체 = SyntheicEvent
                            console.log(e);
                        }
                    }
                    />
                    </div>
                    );
                }
            }


export default EventPractice;

 

위의 코드 중, onChange 코드를 아래와 같이 수정하면,

 onChange={
           (e) => {                  // 콘솔에 기록되는 e 객체 = SyntheicEvent
                    console.log(e.target.value);
                        }
                    }

 

이를 통해 값이 바뀔 때마다 콘솔에 기록할 수 있게 됩니다.

 

더불어 state에 input 값을 담고, this.setState메서드를 호출하며, input의 value값을 state에 있는 값으로 설정하면 아래의 코드와 같습니다.

 

import React, { Component} from 'react';
class EventPractice extends Component{
    state = {
        message: ''
    }

    render(){
        return(
            <div>
                <h1>이벤트 연습 </h1>
                <input 
                    type = "text"
                    name = "message"
                    placeholder='아무거나입력'
                    onChange={
                        (e) => {
                            this.setState({
                                message: e.target.value
                            })
                        }
                    }
                />
            </div>
        );
    }
}

export default EventPractice;

 

 

• 임의 메서드 생성

이벤트를 실행할 때에는, 함수형태의 값을 전달해야 한다는 주의할 점이 있기 때문에,

위의 과정에서 랜더링을 하는 동시에 함수를 만들어서 전달하는 방법을 찾아보았습니다.

 

이 방법 외에도, 아래의 코드처럼 함수를 미리 준비하는 방법이 있습니다.

import React, { Component} from 'react';
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
        });
    }

    handleClick(){
        alert(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>
        );
    }
}

export default EventPractice;

 

이는 가독성이 높다는 장점이 있으며, 함수를 constructor함수와 바인딩하는 작업이 이루어지고 있습니다.

 

 

 

 

• input 여러 개 다루기

input 한 개 -> state에 넣기

input 여러개 -> event개체 이용하기 : e.target.name 값 사용하기

 

 

* 객체 안에서 key를 []로 감싼다면, 그 안의 내용이 실제 key 값이 됩니다.

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

 

 

 

• onKeyPress 이벤트 핸들링

comment 인풋에서 사용자가 ENTER 키를 눌렀을 때 handleClick 메서드를 호출하는 코드입니다.

import React, { Component} from 'react';
class EventPractice extends Component{
    state = {
        username: '',
        message: ''
    }

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

    handleClick = () => {
        alert(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>
        );
    }
}

export default EventPractice;

 

 

 

 

4.3. 함수 컴포넌트 구현

 

지금까지 작성한 EventPractice.js 코드를 함수형 컴포넌트로 바꿔 작성하면 다음과 같습니다.

더불어 onChange함수 두 개를 만들어 e.target.name을 사용하지 않았습니다.

import React, { useState } from 'react';

const EventPractice = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
  const { username, message } = form;
  const onChange = e => {
    setTimeout(() => console.log(e), 500);
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사 한 뒤
      [e.target.name]: e.target.value // 원하는 값을 덮어씌우기
    };
    setForm(nextForm);
  };
  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>
  );
};
export default EventPractice;

 

 

* 두 가지 컴포넌트의 구현 및 특징의 차이점 :

 

import문에서부터 차이점을 가지는 클래스와 함수형 컴포넌트는 메모리 자원의 쓰임에서도 차이를 가지는데, 클래스형이 자원을 더 이용한다는 점이 있습니다. 또한 클래스가 state, lifeCycle 관련 기능 사용이 가능한 반면, 함수형은 불가능하다는 점도 도드라진 특징입니다.

 

보다 자세한 점은 아래의 링크 참고 바랍니다.

클래스형과 함수형 차이

 

 

리액트에 조금 익숙해졌다면, 아래의 [벨로퍼트와 함께하는 모던 리액트 e 교재도 가볍게 참고할 것을 추천합니다.

이곳에서는 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 예제 코드와 함께 설명하고 있습니다.

교재와는 다른 관점에서 둘의 차이를 관찰할 수 있습니다.

 

24. 클래스형 컴포넌트 · GitBook

 

 

 

 

 

4.4 정리

 

HTML의 DOM Event를 알고 있다면, 리액트의 두 가지 컴포넌트 사용도 어렵지 않을 것입니다.

위의 과정을 통해 클래스형 컴포넌트와 함수형 컴포넌트 두 가지를 이용해 동일한 내용의 문서를 다른 방법으로 작성해보았습니다.

이번 장에서 배운 input 여러 개를 useState에서 form 객체를 이용하는 방법은 이후 useReducer와 custum Hooks에 유용할 것입니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Quiz.

 

* 이벤트 핸들링의 주의사항으로 _____ 표기법을 이용한다는 점과, 함수 형태의 값을 전달해야 한다는 점이 있다.* 이벤트 핸들링의 주의사항으로 ____ 요소에만 이벤트 설정이 가능하다는 점이 있다.

* 다양한 이벤트 종류 중, 3가지를 적으시오. _______  / ________  / ________

* input이 한 개 일 때면 ________ 에 넣는다.* input이 여러 개 일 때면 ______ 개체에 넣는다.* 함수형 컴포넌트와 클래스형 컴포넌트 중, state를 사용하지 못하는 컴포넌트는 ________이다. 

* 작성한 컴포넌트는 App 컴포넌트에서 불러와 랜더링 한다. 이를 불러오는 import 문을 코드로 표현하시오.

* 객체 안에서 key 값을 []로 감싸 number을 의미하는 value를 코드로 표현하시오.

* 다음과 같은 onChange 코드를 입력할 때마다 콘솔 값이 바뀌는 코드로 표현하시오.

onChange={
	(e) => {                
		console.log(e);
		}
}

 

 

 

 

 

 

 

---

Corner React1
Editor: 라마