Handling Events

Event Handling

이벤트 핸들링(event handling)이란

웹 페이지에서 사용자 상호작용(user interaction)과 관련된
 동적인 기능을 구현하기 위해 사용되는 기술이다.

이벤트란 사용자가 발생시키는 클릭, 키보드 입력, 스크롤 등과 같은 행위를 의미

이러한 이벤트가 발생했을 때 브라우저가 이를 감지하고,
 이벤트를 처리할 수 있는 JavaScript 코드를 실행하는 과정이다.

사용자 상호작용에 따라 동적으로 반응하거나,
 데이터를 업데이트하거나, UI를 변경하는 등 다양한 동작을 수행 가능하다.

DOM / React Event

// DOM
<button onclick="activate()">
    Activate
</button>

// React (camel case)
<button onClick={activate}>
    Activate
</button>

 

 

Event Handler (Event Listener)

이벤트를 처리하는 함수

 

예제코드 (Bind)

class Toggle extends React.Component {
    constructor(props) {
        super(props);

        this.state = { isToggleOn: true};

        // 자바스크립트에서는 기본적으로 클래스 함수들이 바운드되지 않음
        // 바운드 하지 않을경우 this.handleClick은 undefined임으로 사용불가
        // callback에서 'this'를 사용하기 위해서는 바인딩을 필수적으로 해줘야 함
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                {this.state.isToggleOn ? '켜짐' : '꺼짐'}
            </button>
        );
    }
}

 

 

예제코드 (Class fields syntax)

class MyButton extends React.Component {
    handleClick = () => {
        console.log('this is:', this); // class fields syntax
    }

    render() {
        return (
            <button onClick={this.handleClick}>
                클릭
            </button>
        )
    }
}

 

예제코드 (Arrow Func)

※주의 ※ : MyButton 컴포넌트가 렌더링 될 때마다 다른 콜백 함수가 생성됨

해당 콜백 함수가 하위 컴포넌트에 prop으로 넘겨지면
하위 컴포넌트에서 추가적인 렌더링 야기한다.
성능 문제를 피하기 위해서는 바인딩이나 클래스필드 신텍스 사용을 권장

 

class MyButton extends React.Component {
    handleClick() {
        console.log('this is:', this);
    }

    render() {
        // 이렇게 하면 'this'가 바운드됨
        return (
            <button onClick={() => this.handleClick()}>
                클릭
            </button>
        )
    }
}

 

함수 컴포넌트에서의 이벤트 처리

function Toggle(props) {
    const [isToggleOn, setIsToggleOn] = useState(true);

    // 방법 1. 함수 안에 함수로 정의
    function handleClick() {
        setIsToggleOn((isToggleOn) => !isToggleOn);
    }

    // 방법 2. arrow function을 사용하여 정의
    const handleClick = () => {
        setIsToggleOn((isToggleOn) => !isToggleOn);
    }

    return (
        <button onClick={handleClick}>
            {isToggleOn ? "켜짐" : "꺼짐"}
        </button>
    )
}

 

Event Handler에 Arguments 전달하기

클래스 컴포넌트 전달

/*
event라는 매개변수는 리액트의 이벤트 객체를 의미
두 방법 모두 첫번째 매개변수는 id이고 두번째 매개변수로 이벤트가 전달됨
*/

// arrow function
// 명시적으로 이벤트를 두번째 매개변수로 넣어줌
<button onClick={(event) => this.deleteItem(id, event)}>삭제하기</button>

// bind
// 이벤트가 자동으로 id 이후에 두번째 매개변수로 전달됨
<button onClick={this.deleteItem.bind(this, id)}>삭제하기</button>

 

함수 컴포넌트 Argument 전달

// 매개변수 순서 변경 무관
function Mybutton(props) {
    const handleDelete = (id, event) => {
        console.log(id, event.target);
    };

    return (
        <button onClick={(event) => handleDelete(1, event)}>
            삭제하기
        </button>
    );
}

 

 

---

Referenced By

인프런 - 처음 만난 리액트(React)

[지금 무료] 처음 만난 리액트(React) | Inje Lee (소플) - 인프런

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Function.prototype.bind() - JavaScript | MDN

 

https://wikidocs.net/196604

05) 이벤트 핸들링