REACT- event

컴포넌트에 event기능 부여하기

1. 이벤트를 사용해서 경고장 띄우기

	{/* 홈으로 이동하는 헤더 영역 */}
      <Header title="WEB" onChangeMode={function() {
        alert('Header');
      }}></Header>

➡️ onChangMode라는 prop의 값으로 'Header'라는 경고창이 뜨는 함수를 전달.

function Header(props) {
  return <header>
    <h1><a href="/" onClick={function (event) {
      event.preventDefault();
    }}>{props.title}</a></h1>
  </header>
}

➡️ a태그를 클릭했을 때 저 함수가 호출되는데,
이 때 WEB을 클릭했을 때 페이지 리로드가 일어나지 않게 하기 위해서는 첫번째 파라미터로 even트를 넣어주고 evet.preventDefault();를 넣어준다.
이렇게 하면 a태그가 하는 동작하는 기본 동작을 prevent(예방하다, 방지)한다.
=> 기본동작을 방지하게 되면 클릭해도 리로드가 일어나지 않게된다.

2. WEB를 눌렀을 때 경고창 띄우기

➡️ 그 다음 해야 할 것은
onClick의 함수가 호출됐을 때, Header의 props로 전달된 onChangeMode가 가르키는 함수를 호출하는 것이다.

어떻게??
➡️ props.onChangeMode(); 이렇게 해주면 함수를 호출하는 것이 된다.

function Header(props) {
  return <header>
    <h1><a href="/" onClick={function (event) {
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}

☝🏻 arrow function으로 바꿔주기

function Header(props) {
  return <header>
    <h1><a href="/" onClick={(event) => {
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}

	{/* 홈으로 이동하는 헤더 영역 */}
      <Header title="WEB" onChangeMode={() => {
        alert('Header');
      }}></Header>