React 6. 이벤트

[ 이벤트 기능 넣어보기 ]

예시
<input type="button" onclick="alert('hi')">

 

- Header Component에 이벤트 기능 넣어보기

function App() {
  return (
    <div>
     <Header title="WEB" onChangeMode = {()=>{   <<< 이 부분
      alert('Header');
     }}></Header>
    </div>
  );
}

<Header></Header> 컴포넌트 안에 넣을 수 있는 기능 중 Alert가 뜨게 하려면
                                               (링크 클릭시 알람창이 뜸)
1) onChangeMode={()=>{
	alert('Header)
    }}
  이렇게 컴포넌트 안에 onChangeMode를 쓰는데 함수로 작성이 되어야 됨.

 

- 그리고 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>
}

1) a태그 안에 onClick이라고 이벤트를 걸어주면 됨
    onClick={(event)=>{            << onClick = 뒤에는 함수가 들어가야 됨.
    event.preventDefault();        << 링크 클릭시 페이지 reroad안되게 설정 기능
    props.onChangeMode();          << function App() 함수안의 내용 호출 
                                      (여기서는 'Header'라는 알람이 뜨게 해줌.
  }}

사이트상에서 보여지는 상태

 

 

- <Nav></Nav>에서는 클릭시 id값이 호출되게 해보기

function App() {
  return (
    <div>
     <Nav topics = {topics} onChangeMode ={(id)=>{   << 여기도 onChangeMode사용
       alert(id);                                       id값을 클릭시 id가 창에 뜨도록 해줌
     }}></Nav>
    </div>
  );
}

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();                               <<< 링크 클릭시 reroad안되게.
          props.onChangeMode(event.target.id);                  <<< *1
        }}>{t.title}</a>
        </li>); 
 }
   return <nav>
         <ol>
          {lis}
         </ol>
       </nav>
 }
 
 *1 : 여기서 id 값을 얻어내는 방법 중 하나가
      6번 줄에서 a태그 안에 id={t.id}라고 입력 해주는 게 있음

 

클릭시 해당 id값이 alert로 뜸