TIL-2024.04.27 - React - 003. Event Handler

질문:

1. React에서 Event Handler 설정을 어떻게 사용할 수 있어 ? 

 

 

Event Handler

- 이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수

- React에서 이벤트 핸들러는 일반적으로 JSX 문법을 사용하여 구성.

 

기본 예제

// ParentComponent.js
import React, {useState} from 'react';
import ChildComponent from './ChildComponent';

const App = () => {
    // useState
    const [message, setMessage] = useState('');
    const [color, setColor] = useState('black');

    const onClickEnter = () => setMessage('Hello World');
    const onClickLeave = () => setMessage('Goodbye World');

    return (
        <div>
            <button onClick={onClickEnter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
        </div>
    )
    
    
    /*
    * Event Handler 주의 사항.
    * 1. 카멜 표기법 (e.g. onClick) 
    * 2. 함수형태의 값을 전달 (HTML 이벤트 전달 시는 큰따옴표 안에 실행할 코드를 전달했지만, 리엑트에서는 함수 형태의 객체 전달)
    * 3. DOM 요소에만 이벤트 설정가능하고, 직접 만든 컴포넌트에는 이벤트 자체 생성 불가
    * */


};

export default App;

 

 

 

 

추가 예제 (메인)

import React from 'react';
import EventPractice from "./components/003-EventHandler/003-1-EventPractice/EventPracticeFunc";
// import EventPractice from "./components/003-EventHandler/003-1-EventPractice/EventPracticeClass";


const App = () => {
    return (
        <div>
            <EventPractice/>
        </div>
    )



};

export default App;

 

 

 

추가 예제 (클래스 컴포넌트 시, )

import React from "react";

class EventPractice extends React.Component {
    // 클래스 필드 선언 구문
    state = {
        //'message' 속성을 빈 문자열로 초기화한 초기 상태 객체를 할당. 없어도 되나, 이때 onClick 이벤트 발생하면 에러 발생
        // 없을 경우, onClick 이벤트 실행 시, Uncaught TypeError: Cannot read properties of null (reading 'message')
        username: '',
        message: ''

    };

    // constructor(props) {
    //     super(props);
    //     // Constructor 사용 이유
    //     // (클래스의 멤버로 취급되므로 클래스 내부에서 this.handleChange & this.handleClick 와 같이 호출)
    //     // 함수가 호출될 때 this 는 호출부에 따라 결정.
    //     // 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this 관계가 끊어져버림.
    //     // > 임의 메서드가 이벤트로 등록되어도 this 를 컴포넌트 자신으로 제대로 가리키기 위해서는 메서드를 this 와 바인딩해야 하지만...
    //     // 이 때, 화살표 함수를 사용하면 바벨의 transform-class-properties 문법을 사용되어 constructor 를 없애도 됨
    // 	   // this 가 컴포넌트 인스턴스를 가르킴(이는 화살표 함수가 자신이 선언된 컨텍스트에서 this 를 캡처)

    //     this.handleChange = this.handleChange.bind(this);
    //     this.handleClick = this.handleClick.bind(this);
    // }

    handleChange = e => {
        this.setState({
            // 객체 안에서 key 를 []로 감싸면, 안에 넣은 레퍼런스가 가리키는 실제 값이 key 가 됨.
            [e.target.name]: e.target.value
        })
    }
    handleClick = () => {
        alert('message:: ' + this.state.message + ', name :: ' + this.state.username);
        this.setState({message: '', name: ''});
    };
    render = () => {
        return (
            <div>
                <h1>Event Practice</h1>
                <input type="text" name="username" placeholder="User Name" value={this.state.username} onChange={this.handleChange}/>
                <input type="text" name="message" placeholder="Enter Anything" value={this.state.message} onChange={this.handleChange}/>
                <button onClick={this.handleClick}>확인</button>
            </div>
        );
    };
}

export default EventPractice;

 

 

 

 

추가 예제 (함수 컴포넌트 시, )

import React from "react";

const EventPractice = () => {
    const [form, setForm] = React.useState({
        username: '',
        message: ''
    });
    const {username, message} = form;

    const onChange = e => {
        const nextForm = {
            ...form,
            [e.target.name]: e.target.value
        };
        setForm(nextForm);
    };

    const onClick = () => {
        alert('message:: ' + message + ', name :: ' + username);
        setForm({
            username: '',
            message: ''
        });
    };

    const onKeyDown = e => {
        if (e.key === 'Enter') {
            onClick();
        }
    };

    return (
        <div>
            <h1>Event Practice</h1>
            <input type="text" name="username" placeholder="User Name" value={username} onChange={onChange}/>
            <input type="text" name="message" placeholder="Enter Anything" value={message} onChange={onChange} onKeyDown={onKeyDown}/>
            <button onClick={onClick}>확인</button>
            {/*<input type="text" name="message" placeholder="Enter Anything" onChange={handleChange}/>*/}
            {/*<button onClick={handleButton}>확인</button>*/}
        </div>
    );


};


export default EventPractice;

 

 

 

답변:

1. React에서 Event Handler 설정을 어떻게 사용할 수 있어 ? 

- 이벤트 핸들러는 일반적으로 JSX 문법을 사용하여 구성.

- 클래스 컴포넌트와 함수 컴포넌트가 조금 다르게 사용됨.

- 클래스의 임의 메서드가 특정 HTML 요소의 이벤트로 등록되는 과정에서 메서드와 this 관계를 끊어버려 constructor를 통해 .bind 사용 필요 (임의 메서드 === 클래스(멤버) 함수 === 인스턴스 메서드)

- 하지만, Arrow Function로 클래스 함수 사용 시, 생성자 필요 X