React에서 이벤트 핸들러에 익명 함수를 사용하는 이유

안녕하세요! 😊 React를 공부하다 보면 이벤트 핸들러를 props로 전달할 때, 익명 함수를 사용하는 경우를 자주 보게 됩니다. 예를 들어, 아래와 같은 코드가 있다고 가정해 보겠습니다.

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div>
      <Button onClick={onPlayMovie}>Play Movie</Button>
      <Button onClick={onUploadImage}>Upload Image</Button>
    </div>
  );
}

이 코드를 보면 onPlayMovie={() => alert('Playing!')}와 같은 형태로 익명 함수를 사용하고 있습니다.

처음 React를 배우시는 분이라면 **"왜 굳이 익명 함수를 사용해야 할까?"**라는 의문이 드실 수 있습니다. 그래서 이번 글에서는 React에서 이벤트 핸들러에 익명 함수를 사용하는 이유를 설명드리겠습니다. 😊

 

1. 즉시 실행 방지

만약 익명 함수를 사용하지 않고, 아래처럼 직접 함수를 호출하면 어떻게 될까요?

<Button onClick={alert('Playing!')}>Play Movie</Button>

위 코드에서는 onClick 속성에 alert('Playing!')의 실행 결과가 전달됩니다. 즉, 컴포넌트가 렌더링될 때 즉시 실행되어 버리고, 버튼을 클릭하기 전에 이미 alert이 떠버리는 문제가 발생합니다.

따라서, 이벤트가 발생했을 때만 실행되도록 하기 위해 익명 함수를 사용해야 합니다.

 

<Button onClick={() => alert('Playing!')}>Play Movie</Button>

이제는 버튼을 클릭해야만 alert이 실행됩니다! 🎉

2. 매개변수 전달이 필요한 경우

어떤 함수를 실행할 때 특정 매개변수를 전달해야 하는 경우가 있습니다. 예를 들어, onPlayMovie 함수가 장르 정보를 받아야 한다면 어떻게 해야 할까요?

<Button onClick={onPlayMovie('Action')}>Play Movie</Button>

위 코드에서는 onClick 속성에 onPlayMovie('Action')의 실행 결과가 전달되므로, 마찬가지로 렌더링 시점에 즉시 실행되는 문제가 발생합니다.

이럴 때도 익명 함수를 사용하면 해결할 수 있습니다.

<Button onClick={() => onPlayMovie('Action')}>Play Movie</Button>

이제 버튼을 클릭할 때만 onPlayMovie('Action')이 실행됩니다! 🎬

정리 ✨

React에서 이벤트 핸들러를 props로 전달할 때, 익명 함수를 사용하는 이유는 다음과 같습니다.

✅ 즉시 실행을 방지하여 이벤트 발생 시에만 실행되도록 함 ✅ 매개변수를 전달할 때 유용함 

앞으로 React를 개발할 때 더욱 자연스럽게 활용하실 수 있을 것입니다. 😃