이벤트란?

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라 한다.

리액트의 이벤트 시스템

HTML 이벤트와 인터페이스가 동일함 ⇒ 사용법이 비슷하다

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

• 이벤트 이름은 카멜 표기법(처음 소문자- 중간 대문자)
• 이벤트에 실행할 JS코드 x, 함수 형태의 값을 전달(화살표 함수 잘씀)
• DOM 요소에만 이벤트를 설정할수있다(개인 커스텀 개념이 아니라 걍 props로 보내는 개념)

예제

import React, { Component } from 'react'

export 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객체는 evnet 관련 인자이다 (여기서는 onChang가 동작하는 인자를 말한다)
• e는 인조이벤트이기 때문에 금방 초기화됨
• 그래서 e.target.vale를 따로 기록하면 값을 저장할수 있다. (밑에 그림은 e 객체 내용)

state연계 예제

import React, { Component } from 'react'

export class EventPractice extends Component {

    state = {
        message: ''
    }

    render() {
        return (

            <div>
                <h1> 이벤트 연습 </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

• 잘 담겨있는걸 확인할수있다.

임의의 메서드 만들기

앞서 말했듯 함수 형태의 값을 전달하다보니, 렌더링과 동시에 함수를 만들었는데

이방법 대신 ⇒ 함수를 미리 만들어서 전달하는거임

• 일반적 방법 : 함수를 따로 만들고 → 생성자 함수를 이용해 this를 바인딩 (만든 함수 ↔ 호출 함수)
• 화살표 함수 방법 : 화살표 함수로 함수를 만든다 ⇒ this 바인딩이 전역 객체로 가지 않고, 상위 객체에 바인딩

input 여러개 다루기

• 메서드를 여러개 만들기
• event 객체 활용하기 : e.target.name을 이용하면 → 해당 이벤트가 실행될곳(input)의 name을 설정해줘서 각자 다른 input의 name을 참조하고 거기에 해당 input의 값을 넣으면 된다

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

키보드 입력 이벤트 핸들링

onKeyPress 함수를 이용하고 값은 e.key 로 판단 하면된다

함수형 컴포넌트로 구현해보기

import React, { useState } from 'react'

function EventPractice() {
    const [list, setList] = useState({
        username: '',
        message: ''
    });

    const { username, message } = list; // 이거때문에 밑에서 this.state.list.name 이렇게 안해도됨
    const onChange = e => {
        const nextList = {
            ...list,
            [e.target.name]: e.target.value
        };

        setList(nextList);
    }
    const onClick = () => {
        alert(username + ':' + message);
        setList({
            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

• 함수형은 this 바인딩이 필요 없다.
• 비구조 할당을 통해서 불필요한 호출을 줄임