이벤트

Header 컴포넌트에 event기능 넣기

onChangeMode 함수 전달하기

• Header 컴포넌트 안에서 링크를 클릭하면 컴포넌트가 함수를 호출해서 Header를 클릭했을 때 해야하는 작업들이 실행되게끔
• ex) alert('Header);

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

Header 컴포넌트

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

• a태그 안에 onClick의 함수 이벤트를 걸어준다.(리액트 개발환경이 브라저가 이해할 수 있는 html로 컨버팅해주기 때문에 기존의 문법과 다르다.)

onClick={(event)=>{
      event.preventDefault(); //page 리로드를 방지한다.
      props.onChangeMode();
    }

목록 안 링크 이벤트 호출(이벤트값)

function App() {
  const topics = [
    {id:1, title:'html', body:'html is...'},
    {id:2, title:'css', body:'css is...'},
    {id:3, title:'javascript', body:'javascript is...'},
  ]
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </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); // Nav의 onChangeMode함수 호출
    }}>{t.title}</a></li>)
  }
  return <nav>
  <ol>
      {lis}
  </ol>
</nav>
}

• onChangeMode는 id값을 필요로 하기 때문에 함수를 호출할 때 id값을 부여해야한다.
• a태그에 id={t.id}의 값 부여.
• 이벤트 함수 안에서 a태그의 id속성을 얻어내려면 event객체를 사용.(event.target)
• (event.target)의 target은 이벤트를 유발시킨 태그=>a태그
• a태그가 갖고있는 id값을 가져온다면 (event.target.id)