소플의 처음 만난 리액트_실습6

소플의 처음 만난 리액트_실습6

---

이벤트란?

- 사건을 의미

 

리액트의 이벤트

- 이벤트의 이름을 카멜 표기법으로 표기

- 이벤트를 처리할 함수를 그대로 전달

 

이벤트 핸들러(=이벤트 리스너)

- 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수

- 클래스 컴포넌트 → 클래스의 함수를 정의하고 생성자에서 바인딩해서 사용

- 함수 컴포넌트 → 함수 안에 함수로 정의하거나 화살표 함수 사용해서 정의

 

Arguments(=파라미터) 전달하기

- 클래스 컴포넌트 → 화살표 함수를 사용하거나 Function.prototype.bind를 사용해서 전달

- 함수 컴포넌트 -> 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용

---

클릭 이벤트 처리하기 실습

클래스 컴포넌트 - 클래스의 함수를 정의하고 생성자에서 바인딩해서 사용

++index.js에 ConfirmButton import하고 render 함수 안에 컴포넌트 넣기

import React from "react";

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

        this.state = {
            isConfirmed : false,
        };
        
       this.handleConfirm = this.handleConfirm.bind(this);
    }
    
    handleConfirm() {
        this.setState((prevState) => ({
            isConfirmed : !prevState.isConfirmed,
        }));
    }

    render() {
        return (
            <button
                onClick = {this.handleConfirm}
                disabled = {this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        );
    }
}
export default ConfirmButton;

확인하기 버튼을 클릭했을 때 isConfirmed상태가 변하면서 버튼이 disabled가 된다.

 

같은 기능을 화살표 함수를 사용했을 때의 예제 

import React from "react";

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

        this.state = {
            isConfirmed : false,
        };

    }
    
    handleConfirm = () => {
        this.setState((prevState) => ({
            isConfirmed : !prevState.isConfirmed,
        }));
    }
    

    render() {
        return (
            <button
                onClick = {this.handleConfirm}
                disabled = {this.state.isConfirmed}
            >
                {this.state.isConfirmed ? "확인됨" : "확인하기"}
            </button>
        );
    }
}
export default ConfirmButton;

 

함수 컴포넌트로 변경해보기

import React, {useState} from "react";

function ConfirmButton(props) {

    const [isConfirmed, setIsConfirmed] = useState(false);  
    
    const handleConfirm = () => {
          setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed);
    }
    
    return (
        <button
            onClick = {handleConfirm}
            disabled = {isConfirmed}
        >
            {isConfirmed ? "확인됨" : "확인하기"}
        </button>
    );
}
export default ConfirmButton;