[React] 클릭 Event 처리하기

 

✔ 클릭 Event 처리하기

• src > chapter_08 > ConfirmButton.jsx

import React from "react";

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

        this.state = {
            isConfirmd: false,
        };

        this.handleConfirm = this.handleConfirm.bind(this);
    }

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

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

export default ConfirmButton;

• index.js 수정

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './chapter_03/Library';
import Clock from './chapter_04/Clock';
import CommentList from './chapter_05/CommentList';
import NotificationList from './chapter_06/NotificationList';
import Accomodate from './chapter_07/Accomodate';
import ConfirmButton from './chapter_08/ConfirmButton';

ReactDOM.render(
  <React.StrictMode>
    <ConfirmButton />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

• npm start

확인하기 버튼을 누르면 확인됨으로 바뀜과 동시에 더 이상 누를 수 없는 상태(비활성화)가 된다.

 

 

 

 

✔ Class fields syntax 사용하기

 

① bind 코드 제거

② Arrow function 으로 변경

import React from "react";

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

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

    render() {
        return (
            <button
                onClick={this.handleConfirm}
                disabled={this.state.isConfirmd}
            >
                {this.state.isConfirmd ? "확인됨" : "확인하기"}
            </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;