리액트 핵심만 훑어보자 #9 이벤트 처리

📘 『소플의 처음 만난 리액트』를 읽고 정리한 글입니다. 

 

리액트에서 이벤트 처리는 어떻게?

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

// 리액트
<button onClick={activate}>Activate</button>

• DOM에도 리액트에도 이벤트가 있지만 사용하는 방법이 조금 다르다.
• 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있는데 이것을 이벤트 핸들러 또는 이벤트 리스너라고 한다. 

 

클래스 컴포넌트의 이벤트 처리를 살펴보자

class Toggle extends React.Component {
	constructor(props) {
    	super(props);
        
        this.state = { isToggleOn : true };
        
        this.handleClick = this.handleClick.bind(this);
    }
    
    handleClick() {
    	this.setState(prevState => ({
        	isToggleOn : !prevState.isToggleOn
        }));
    }
    
    render() {
    	return (
            <button onClick={this.handleClick}>
            	{this.state.isToggleOn ? '켜짐' : '꺼짐'}
            </button>
        );
    }
}

• 클래스 함수들은 기본적으로 바인딩되지 않는다. 
• 그렇기 때문에 직접 바인드를 하지 않으면 this.handelClick은 글로벌 스코프에서 호출된다.
• 그런데 글로벌 스코프에서 해당 값은 undefined이므로 사용할 수 없다.
• 따라서 함수의 이름 뒤에 괄호 없이 사용하려면 해당 함수를 바인드 해주어야 한다.
• 아니라면 다음처럼 화살표 함수를 사용해야 한다.

 

class MyButton extends React.Component {
    handleClick () {
    	console.log('this is:', this);
    }
    
    rendor() {
    	return (
            <button onClick={() => this.handleClick()}>
            	클릭
            </button>
    }
}

• 위 예제에서는 화살표 함수를 사용하였다.
• 일반 함수와 화살표 함수의 차이점이 무엇일까?
• 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 

 

함수 컴포넌트에서 이벤트 처리를 해보자

function Toggle(props) {
    const [isToggleOn, setIsToggleOn] = useState(true);
    
    // 1. 함수 안의 함수
    function handleClick() {
    	setIsToggleOn((isToggleOn) => !isToggleOn);
    }
    
    // 2. 화살표 함수
    /*
    const handleClick = () => {
    	setIsToggleOn((isToggleOn) => !isToggleOn);
    }
    */
    
    return (
    	<button onClick={handleClick}>
            {isToggleOn ? '켜짐' : '꺼짐'}
        </button>
    );
}

• 상기 코드는 위의 Toggle 클래스 컴포넌트를 함수 컴포넌트로 변환한 것이다.
• 1번 방식이나 2번 방식 중 기호에 맞게 골라서 사용하면 된다. 

 

전달인자(Arguments)와 함께 함수를 호출해 보자

function myButton(props) {
    const handleDelete = (id, event) => {
    	console.log(id, event.target);	
    }
    
    return (
    	<button onClick={(event) => handleDelete(1, event)}>삭제하기</button>
    );
}

• 사실 간단해서 설명이 따로 필요 없다.
• 화살표 함수 방식으로 handleDelete() 메소드를 호출하며 id와 event를 전달하고 있다.

 

실습을 통해 클릭 이벤트를 처리해 보자

function ConfirmButton(props) {
    const [isConfirmed, setIsConfirmed] = useState(false);

    const handleConfirm = () => {
        setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
    };

    return (
        <button onClick={handleConfirm} disabled={isConfirmed}>
            {isConfirmed ? '인증완료' : '인증'}
        </button>
    );
}

export default ConfirmButton;

• ConfirmButton.jsx 코드이다.
• 책에서 다룬 실습코드와 크게 다르지 않다.
• 최근 화면 설계에서도 유용하게 쓰일 수 있는 코드인 것 같아서 따로 수정 작업을 거치지 않았다.

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import ConfirmButton from './component/ConfirmButton';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ConfirmButton />
);

reportWebVitals();

• 이번에도 index.js에 작성한 컴포넌트를 추가해 주자.

 

실행해 보자

• 실습이 제대로 되었다면 인증 버튼을 확인할 수 있다
• 이메일 인증 버튼 등 유용하게 쓰이고 충분히 재사용도 가능한 컴포넌트이다.

 

마치며

운전 연습하랴 블로그 포스팅하랴 정작 토이 프로젝트에 손을 못 대고 있는데 언제 하지... 🤤 

 

이미지 출처

[React] Component 를 사용하는 기본적인 방법

소플 - soaple.io