[ React ]처음 만난 리액트_7_Handling Events ( 강좌 참고 )

📌 이벤트 ( Event )

• 특정 사건을 의미한다. ( 사용자가 버튼을 클릭하는 것도 하나의 이벤트 )

---

DOM의 Event

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

DOM에서는 클릭 이벤트를 처리할 함수를 onClick을 통해 전달한다.

 

리액트의 Event

<button onClick={activate}>
    Activate
</button>

동일한 기능인 리액트 코드이다.

먼저 onClick에서 카멜표기법으로 쓰여 있다.

DOM에서는 이벤트를 전달할 함수를 문자열로 전달하지만, 리액트는 함수 그대로 전달한다.

 

둘 사이에는 이벤트 이름의 표기법과 함수를 전달하는 방식의 차이가 있다.

---

🤍 Event Handler

어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수가 있다.

이것을 Event Handler 라고 부른다.

이것은 이벤트가 발생하는 것을 계속 듣고 있다는 의미로 Event Listener 이라고 부르기도 한다.

 

∎ Arguments 전달하기

Argument

함수에 주장할 내용 함수에 전달할 데이터

---

🐱‍💻 클릭 이벤트 처리하기

create react app으로 만든 프로젝트를 연다.

 

ConfirmButton.jsx

//ComfirmButton 이름의 클래스 컴포넌트 생성.
import React from "react";

//확인 여부를 저장하기 위해,
class ConfirmButton extends React.Component{
    constructor(props){
        super(props);

        //state에 isConfirmed 변수를 갖고 있다.
        this.state = {
            isConfirmed: false, //초기값은 false.
        };

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

    //버튼에 onClick 이벤트를 처리하기 위해, 
    //이벤트 핸들러로 handleConfirm 함수 생성.
    handleConfirm(){
        this.setState((prevState) => ({
            isConfirmed: !prevState.isConfirmed,
        }));
    }

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

export default ConfirmButton;

//코드 참고
//인프런_처음 만난 리액트

ConfirmButton 컴포넌트를 화면에 렌더링하기 위해 index.js를 수정한다.

 

npm start를 입력하면...

아주 조그맣게 버튼이 나온다.

확인버튼을 누르면, 클릭 이벤트가 이벤트 핸들러로 전달되고 isConfirmed 값이 true로 바뀌면서 위와 같이 확인됨 ( 버튼 비활성화 ) 으로 바뀐다.

---

🐱‍💻 Class fields syntax 사용하기

이벤트 핸들러를 Class fiedls syntax로 사용하도록 변경하겠다.

//ComfirmButton 이름의 클래스 컴포넌트 생성.
import React from "react";

//확인 여부를 저장하기 위해,
class ConfirmButton extends React.Component{
    constructor(props){
        super(props);

        //state에 isConfirmed 변수를 갖고 있다.
        this.state = {
            isConfirmed: false, //초기값은 false.
        };
        //1.bind 코드 제거.
        //this.handleConfirm = this.handleConfirm.bind(this);
    }
    //2.Arrow function으로 변경.
    //버튼에 onClick 이벤트를 처리하기 위해, 
    //이벤트 핸들러로 handleConfirm 함수 생성.
    handleConfirm = () => {
        this.setState((prevState) => ({
            isConfirmed: !prevState.isConfirmed,
        }));
    }

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

export default ConfirmButton;

//코드 참고
//인프런_처음 만난 리액트

먼저 bind 코드를 삭제하고, handleConfirm 함수를 Arrow finction으로 변경하면 된다.

실행 결과

---

🐱‍💻 함수 컴포넌트로 바꾸기

ConfirmButton 클래스 컴포넌트를 함수 컴포넌트로 바꿔보겠다. 

클래스 컴포넌트는 거의 사용하지 않아서, 함수 컴포넌트의 형태를 잘 기억해야 한다.

//ComfirmButton 이름의 클래스 컴포넌트 생성.
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;

//코드 참고
//인프런_처음 만난 리액트

실행 결과

---

- <강좌> 처음 만난 리액트

https://www.inflearn.com/

[무료] 처음 만난 리액트(React) - 인프런 | 강의