React - 이벤트

2023.01.25 이벤트

Header 컴포넌트에 이벤트 넣기

Header를 클릭하면 경고창을 띄워보자.

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

Header 컴포넌트 변경

a태그에 onClick={ } 이벤트를 걸면
이제 a 태그는 순수 html이 아니라 유사 html이다.
onClick={ } 이곳에 코드를 작성하면 리액트가
최종적으로 브라우저가 이해할 수 있는 html로 컨버팅해주는 것이다.

onClick="" 아니고 함수(function)를 작성하고 event객체를 첫번째 마라미터로 주입.
event.preventDefault()를 하면
a 태그의 기본 페이지 리로드 작동을 막는다.

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

그 다음은
onClick의 함수가 호출 됐을 때
Header의 props로 전달된 onChangeMode가 가리키는
alert을 포함한 함수를 호출 하자.

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

이렇게 하면 Header를 클릭 했을때 alert이 뜬다!

화살표 함수로 변경해보기

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

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

li 클릭시 경고창 이벤트

li클릭시 해당 id를 경고창에 띄우는 이벤트를 만들어보자.
Nav에 onChangeMode이벤트를 걸고 매개변수로 id를 받는다.

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

Nav 컴포넌트 변경

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 href={'/read/'+t.id} onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
      }}>{t.title}</a>
      </li>)
   }
   ...
}

우선 a 태그의 기능을 막고 (preventDefault)
props의 onChangeMode를 호출하는데 onChangeMode는 매개변수로
id값을 전달해야한다.

그렇기 때문에
a 태그에 id속성을 부여하고
event 객체를 사용하여 id속성을 얻어낸다.
event.target를 하면 이 이벤트를 유발시킨 태그를 가르킨다.(a태그)

event.target.id = a태그의 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>)
   }
...
}

id별로 다르게 경고창이 나온다.