이벤트응답 - 이벤트핸들러 2

이벤트핸들러에서 prop읽기

- 이벤트 핸들러는 컴포넌트 내부에서 선언되기 때문에 컴포넌트의 props에 접근할 수 있다.

import './App.css';

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

export default function Toolbar() {
  return (
    <div>
      <AlertButton message="플레이 하는중!">영화 Play</AlertButton>
      <AlertButton message="업로드 하는중!">이미지 업로드</AlertButton>
    </div>
  );
}

 

=> 클릭하면 message prop과 alert을 표시하는 버튼

 

결과물)

 

 

부모의 이벤트핸들러를 prop으로 전달

• 버튼컴포넌트를 사용하는 부모컴포넌트의 기능이 서로 다른 경우
• 플레이버튼: 영화 재생, 업로드버튼: 이미지 업로드이며 모양은 같은 경우
• 버튼컴포넌트는 부모로부터 이벤트핸들러를 받아서 실행만 시켜주는 역할

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

function PlayButton({ movieName }) {
  function handlePlayMovie() {
    alert(`${movieName}! Play`);
  }

  return <Button onClick={handlePlayMovie}>"{movieName}" Play</Button>;
}

function UploadButton() {
  return <Button onClick={() => alert('업로드중!')}>이미지 업로드</Button>;
}

export default function Toolbar() {
  return (
    <div>
      <PlayButton movieName="짱구는 못말려" />
      <UploadButton />
    </div>
  );
}

=> Toolbar 컴포넌트는 playButton과 UploadButton을 렌더링함

     - PlayButton은 handlePlayClick을 onClick prop으로 내부의 Button에 전달

     - UploadButton은 () => alert('Uploading!')를 onclick prop으로 내부의 Button에 전달

     - Button 컴포넌트는 onClick이라는 prop을 받고  해당 prop을 브라우저의 빌트인 <button>으로 직접 전달하며,

       onClick={onClick}을 사용

이벤트 전파 막기

- 자식컴포넌트와 부모컴포넌트에 동일 이벤트가 걸린 경우

function Button({ onClick, children }) {
  return (
    <button
      className="btn"
      onClick={(e) => {
        e.stopPropagation();
        onClick();
      }}
    >
      {children}
    </button>
  );
}

export default function Toolbar() {
  return (
    <div
      className="Toolbar"
      onClick={() => {
        alert('You clicked on the toolbar!');
      }}
    >
      <Button onClick={() => alert('Playing!')}>Play Movie</Button>
      <Button onClick={() => alert('Uploading!')}>Upload Image</Button>
    </div>
  );
}

=> stopPropagation();을 사용하여 전파 막기

 

form의 기본이벤트 막기

-form안의 submit 버튼 클릭 시 submit 이벤트가 발생하며 페이지가 새로고침 된다  => 새로고침을 막기 위해 기본이벤트를 막아야한다 = preventDefault()를 사용하여 막기

export default function Signup() {
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        alert('Submitting!');
      }}
    >
      <input />
      <button>Send</button>
    </form>
  );
}