[React]이벤트에 응답하기 (이벤트 핸들러 추가하기)

숑이·2024년 7월 10일

JavaScript React study

리액트공부하기

목록 보기

2/4

Responding to events

이벤트 핸들러를 작성하는 다양한 방법
부모 구성 요소에서 이벤트 처리 논리를 전달하는 방법
이벤트가 전파되는 방식과 이를 중지하는 방법

이벤트 핸들러 추가

이벤트 핸들러를 추가하려면 먼저 함수를 정의한 다음 적절한 JSX 태그에 prop으로 전달한다.

Button 컴포넌트 내부에 handleClick 함수를 선언한다.
해당 함수 내부 로직을 구현한다.
<button> JSX에 onclick={handleClick}을 추가한다.

export default function Button(){
  function handleClick(){
    alert('You clicked me!');
  }
  
  return(
      <button onClick={handleClick}>
        Click me
      </button>
	);
}

handleClick 함수를 정의하고 이를 <button> 에 prop 형태로 전달했다. 여기서 handleClick은 이벤트 핸들러 이다.

이벤트 핸들러 함수 특징

주로 컴포넌트 내부에서 정의된다.
handle로 시작하고 그 뒤에 이벤트명을 붙인 함수명을 가진다.

이벤트 핸들러를 JSX내에서 인라인으로 정의한 수 있다.

<button onClick={function handleClick() {
        alert('You clicked me!');
}}>

또는 화살표 함수를 사용하여 보다 간결하게 정의할 수도 있다.

<button onClick={() => {
        alert('You clicked me!');
}}>

이벤트 핸들러로 전달한 함수들은 호출이 아닌 전달되어야 한다.

<button onClick={handleClick}은 handleClcik 함수를 전달한다.

<button onClick={() => alert('...')}>은 () => alert('...') 함수를 전달한다.

이벤트 핸들러 내에서 Prop 읽기

이벤트 핸들러는 컴포넌트 내부에서 선언되기에 이들은 해당 컴포넌트의 prop에 접근할 수 있다.

function AlertButton({ message, children }) {
  return (
    <button onClick={() => alert(message)}>
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="Playing!">
        Play Movie
      </AlertButton>
      <AlertButton message="Uploading!">
        Upload Image
      </AlertButton>
    </div>
  );
}

이벤트 핸들러를 Prop으로 전달하기

Button 컴포넌트를 사용하는 위치에 따라 다른 기능을 수행하도록 만들고자 할 때가 있다. 이러한 기능을 위해서 컴포넌트가 그 부모 컴포넌트로부터 받은 prop을 이벤트 핸들러로 다음과 같이 전달한다.

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

function PlayButton({ movieName }) {
  function handlePlayClick() {
    alert(`Playing ${movieName}!`);
  }

  return (
    <Button onClick={handlePlayClick}>
      Play "{movieName}"
    </Button>
  );
}

function UploadButton() {
  return (
    <Button onClick={() => alert('Uploading!')}>
      Upload Image
    </Button>
  );
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="Kiki's Delivery Service" />
      <UploadButton />
    </div>
  );
}