[생활코딩/React] 2022개정판 | 6. 이벤트

참고자료: 유튜브 생활코딩 React 2022 개정판 https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7 

1.  이벤트

---

Header component

---

Header 컴포넌트에 이벤트를 달아보자!

function App() {
  const topics = [
    {id : 1, title : 'html', body : 'html is ...'},
    {id : 2, title : 'css', body : 'css is ...'},
    {id : 3, title : 'js', body : 'js is ...'},
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header!');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome~" body="Hello, WEB!"></Article>
    </div>
  );
}

👉🏻일단 App의 Header에 onChangeMode라는 함수를 props로 보내주자!

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

👉🏻그리고 Header에서 a tag를 클릭했을 때 onChangeMode함수가 실행되도록 해보자. 리액트의 HTML 구문은 유사 HTML이므로 onclick이 아닌 onClick으로 클릭이벤트를 호출한다. a tag의 기능을 막고 onChangeMode함수를 호출했다!

짠! 잘 실행된다.

 

Nav component

---

이번에는 Nav 컴포넌트에 이벤트를 달아보자!

function App() {

  ...중략...
  
  return (
    <div>
      ...
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      ...
    </div>
  );
}

👉🏻Nav에도 onChangeMode함수를 보내보자! 단 이 함수는 id라는 인자를 받고 그 인자를 alert창에 띄운다.

function Nav(props) {
  const lis = []
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i]
    lis.push(
    <li key={t.id}>
      <a id={t.id} href={'/read/' + t.id} onClick={event=>{
        event.preventDefault();
        props.onChangeMode(event.target.id);
      }}>{t.title}</a>
    </li>
    )
  }
  return (
    ...
  )
}

👉🏻a tag에 onClick 이벤트를 달아 onChangeMode함수를 실행했다. event.target은 클릭된 a tag이다!

클릭한 요소의 id를 잘 출력하는 중!