5. event

 

https://www.youtube.com/watch?v=s3cDPbcoy_4&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=6&t=1s

1. Header 클릭 시 경고창 띄우기

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

onChangeMode 라는 prop에 파라미터로 함수를 넘긴다.

헤더 컴포넌트 안에서 컴포넌트가 함수를 호출해서 헤더를 클릭했을 때 해야하는 작업을 실행하게 한다.

 

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

onClick은 Header를 눌렀을 때 함수가 호출되게 한다.

a태그를 눌렀을 때  페이지 리로드가 되지 않게 하기 위해서 함수의 첫 번째 파라미터로 event 객체를 넘긴다.

event 객체는 event상황을 제어할 수 있는 여러 가지 정보와 기능이 있다.

event.preventDefault(); //해당 태그의 기본적인 이벤트를 방지하는 기능
props.onChangeMode(); //prop으로 주어진 함수를 호출하는 부분

preventDefault()는 a태그를 클릭했을 때 발생하는 기본적인 이벤트를 방지하는 기능이다.

function App()에서 작성한 함수를 불러오기 위해서 props.onChangeMode();를 해준다.

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

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

함수 부분을 깔끔하게 하기 위해서 arrow function으로 바꿔주었다. 기능은 똑같다. 

 

2. Nav 클릭 시 해당 id 띄우기

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 <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

function App() {
  const topics = [
    {id:1, title:'html', body:'html os ...'},
    {id:2, title:'css', body:'css os ...'},
    {id:3, title:'js', body:'js os ...'},
  ]
  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와 마찬가지로 onChangeMode라는 prop에 함수를 전달하는데 함수의 파라미터로 id값을 넘겨주고 id값이 경고창으로 뜨게 하고 싶다.

 

Nav 태그에서 a태그를 클릭했을 때 리로드가 일어나지 않게 하고 경고창이 뜨게 한다.

그렇게 하기 위해서 event.preventDefault() 를 해준다.

함수 안에서 a태그의 id 값을 얻기 위해서 event.target.id를 해준다. 

event.target은 이벤트를 일으킨 태그를 지정해준다.

 

3. 정리

태그를 클릭했을 때 동작을 발생 시키는 방법 = props로 함수를 만들어서 태그로 넘겨주기

props로 넘긴 함수 호출 방법 = props.함수이름();

태그의 기본적인 동작을 막는 방법 = event.preventDefault();

태그의 요소를 가져오는 방법 = event.target.id