8-1강. Handling Events(인자전달하기)

정원·2023년 2월 1일
React
0

React

목록 보기
25/42

2023.02.01 Handling Events Arguments 전달하기

Arguments

Arguments는 주장,논쟁,말다툼 이라는 뜻이있다.
여기서는 함수에 주장할 내용이라고 이해하면 됩니다.

다시 말해 함수에 전달할 데이터를
Arguments라고 하며
같은 의미로 파라미터(Prameter) 라는 용어도 사용한다.
우리 말로는 매개변수 라고 한다.

이벤트 핸들러에 인자(Arguments) 전달하기

루프 내부에서는 이벤트 핸들러에 추가적인 매개변수를 전달하는 것이 일반적입니다.

예를 들어, 특정 사용자프로필을 클릭했을 때 해당 사용자의 아이디를 매개변수로 전달해서
정해진 작업을 처리해야 하는 경우를 들 수 있습니다.
아래 클래스 컴포넌트의 예제 코드를 통해 어떤 식으로 매개변수를 이벤트 핸들러에 전달하는지 보도록 합시다.

<button onClick={(event) => this.deleteRow(id, event)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

위의 코드 두 줄은 모두 동일한 역할을 하지만
하나는 arrrow function을 사용했고
다른 하나는 Function.prototype.bind를 사용했습니다.
event라는 매개변수는 리액트의 이벤트 객체를 의미합니다.
두 방법 모두 첫 번째 매개변수는 id이고 두 번째 매개변수로 event가 전달됩니다.

첫 번째 arrow function을 사용한 방법은 명시적으로 event를 두 번째 매개변수로 넣어 주었고,
두 번째 Function.prototype.bind를 사용한 방법은 event가 자동으로 id 이후의 두번째 매개변수로 전달됩니다.

이렇게 사용하는 방식은 클래스 컴포넌트에서 사용하는 방식이므로
지금은 거의 사용하지 않습니다.

함수 컴포넌트에서는 이벤트 핸들러에 매개변수를 전달할 때
아래와 같이 하면 됩니다.
참고로 매개변수의 순서는 원하는 대로 변경해도 상관없습니다.

함수 컴포넌트 매개변수 전달

function MyButton(props) {
    const handleDelete = (id, event) => {
        console.log(id, event.target);
    };

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

(실습) 클릭 이벤트 처리하기

ConfirmButton 컴포넌트 만들기

ConfirmButton.jsx

import React from "react";
class ConfirmButton extends React.Component {
    construnctor(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;

ConfirmButton 컴포넌트는 확인 여부를 저장하기 위해 state에 isConfirmed 라는 변수를 하나 갖고 있으며 초깃값은 false입니다.
그리고 버튼의 onClick 이벤트를 처리하기 위해서 이벤트 핸들러로 handleConfirm이라는 함수를 만들어 넣어줬습 니다. 위 코드에서 볼 수 있듯이 여기에서는 bind ()를 사용하는 방식으로 이벤트. 핸들러를 처리했습니다.

index.js

수정

import React, { Profiler } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import ConfirmButton from './chapter_08/ConfirmButton';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <ConfirmButton />
  </React.StrictMode>
);

reportWebVitals();

확인 버튼을 누르면 클릭 이벤트가 이벤트 핸들러로 전달되고 isConfirmed의 값이
true로 바뀌면서 버튼이 비활성화 됩니다.


클래스 필드 문법 사용하기

위에서 만든 ConfirmButton 컴포넌트의 이벤트 핸드러를 클래스 필드 문법을 사용하여
변경해 보겠습니다.
먼저 constructor( )에 있는 bind()코드를 제거합니다.
이후 아래와 같이 arrow function을 사용하도록 이벤트 핸들러를 수정합니다.

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

ConfirmButton.jsx

import React from "react";
class ConfirmButton extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isConfirmed: false,
        };
        
      //bind코드 제거
       
    }
	//arrow function으로 변경
    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.jsx

import React, {useState} from "react";

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

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

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

export default ConfirmButton;

state는 useState()훅을 사용하여 처리하였고
이벤트 핸들러는 arrow function을 사용해서 만들었습니다.

요약

이벤트란?

  1. 사용자가 버튼을 클릭하는 등의 사건을 의미

이벤트 처리하기

  1. DOM의 이벤트

    • 이벤트의 이름을 모두 소문자로 표기
    • 이벤트를 처리할 함수를 문자열로 전달

  2. 리액트의 이벤트

    • 이벤트의 이름을 카멜 표기법으로 표기
    • 이벤트를 처리할 함수를 그대로 전달

  3. 이벤트 핸들러

    • 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수
    • 이벤트 리스너라고 부르기도 함
    • 클래스 컴포넌트
      - 클래스의 함수로 정의하고 생성자에서 바인딩해서 사용
      - 클래스 필드 문법도 사용가능
    • 함수 컴포넌트
      - 함수 안에 함수로 정의하거나 arrow function을 사용해서 정의

Arguments 전달하기

  1. Aruments란?

    • 함수에 전달할 데이터
    • 파라미터 또는 매개변수라고 부르기도 함

  2. 클래스 컴포넌트

    • arrow function을 사용하거나 Function.prototype.bind를 사용해서 전달

  3. 함수 컴포넌트

    • 이벤트 핸들러 호출 시 원하는 순서대로 매개변수를 넣어서 사용
profile
정원
이전 포스트

8-1강. Handling Events

다음 포스트

9-1강. 조건부 렌더링

0개의 댓글