5강. 이벤트

어떤 이벤트가 발생했을 때 어떤 작업을 처리하는 일

 

import './App.css';

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

... 생략 ...

function App() {

... 생략 ...

  return (
    <div className="App">
      <Header title = "WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="welcome" body="Hello"></Article>
    </div>
  );
}

export default App;

먼저 상위 컴포넌트 부터 확인해보자.

onClick의 이벤트가 발생하면 ,

      event.preventDefault();
      props.onChangeMode();

다음과 같은 함수가 실행된다.

 

event.preventDefault()는 a태그의 이벤트를 막는다는 의미이다.

props.onChangeMode()는 하위 태그의 함수를 실행하겠다는 뜻이다.

 

따라서, 하위 태그에 작성한

      <Header title = "WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>

WEB을 누르면 설정한 href로 이동하는 것이 아닌 Header라는 경고창이 나오게 될 것이다.

nav컴포넌트를 수정하여 클릭시 해당 id가 나오도록 해보시오.

https://github.com/denist2322/youtube_react/commit/669052bad0fa22cc59582abb5c8a24c442dedd5e

5강 이벤트 · denist2322/youtube_react@669052b