함수형 컴포넌트에서 이벤트 핸들러 정의하기

 

함수형 컴포넌트 내부에서 이벤트 핸들러를(특정 이벤트가 발생했을 때 실행되는 함수) 지정하는 방법에는 두 가지 주요 방법이 있다

1. 함수 안에 또 다른 함수로 정의하는 방법
2. 화살표 함수(arrow function)을 사용하는 방법

두 방법은 이벤트 핸들러를 정의하는 방식에서 차이가 있으며, 각각의 방식에 따라 this바인딩 및 성능에 영향을 줄 수 있다.

 

1. 함수 안에 또 다른 함수로 정의하는 방법

이 방식에서는 이벤트 핸들러를 별도의 함수로 정의하고, 그 함수 안에서 이벤트를 처리하는 방식이다.

import React from "react";

function DynamicHandler() {
  function handleClick(action) {
    // 동적으로 내부 함수를 생성
    function greet() {
      alert(`Hello, ${action}!`);
    }
    return greet;
  }

  return (
    <div>
      <h1>동적 이벤트 핸들러 예제</h1>
      <button onClick={handleClick("World")}>인사하기</button>
      <button onClick={handleClick("React")}>React에 인사하기</button>
    </div>
  );
}

export default DynamicHandler;

 

1. handleClick 함수는 외부에서 실행 가능한 핸들러를 반환한다.

- 이 함수 안에서  greet라는 내부 함수를 생성하여 반환한다.

 

2. handleClick 호출 시 동적으로 특정 값을 기반으로 핸들러를 생성한다.

- 인사하기 버튼을 클릭하면 "Hello, World!"를 보여주는 핸들러가 생성된다.

- React에 인사하기 버튼을 클릭하면 "Hello, React!"를 보여주는 핸들러가 생성된다.

 

 

2. 화살표 함수(arrow function)을 사용하는 방법

화살표 함수를 사용하면, this가 자동으로 바인딩되므로 별도의 bind()를 호출할 필요 없이 이벤트 핸들러에서 this를 사용할 수 있다. 이 방법은 클래스 컴포넌트에서 주로 사용되며, 함수 컴포넌트에서는 주로 이벤트 핸들러를 인라인으로 정의할 때 사용된다.

import React from "react";

const MyComponent = () => {
  // 화살표 함수로 이벤트 핸들러 정의
  const handleClick = () => {
    console.log("Button clicked!");
  };

  return <button onClick={handleClick}>Click Me</button>;
};

export default MyComponent;

 

화살표 함수를 사용하여 this바인딩 문제가 없으며, 코드가 직관적이다.

리렌더링마다 새로운 함수 객체가 생성되지 않으므로 React가 불필요하게 리렌더링을 트리거하지 않는다.

 

 

---

 

 

함수 컴포넌트 내에서 이벤트 핸들러를 정의할 때 두 가지 방법이 모두 가능하고, 어떤방법을 선택할지는 코드의 가독성과 성능에 따라 결정하면 좋다. 성능 최적화를 고려한다면 첫 번째 방법처럼 함수 외부에서 정의하고, 간결함을 원하면 두번째 방법처럼 화살표 함수를 사용하면 된다.