05. 이벤트

이번에는 컴포넌트에 이벤트 기능을 만들어 클릭하면 알림창이 뜨도록 실습을 해볼 것이다.

전체 코드

import logo from './logo.svg';
import './App.css';
function Header(props){
  return <header>
  <h1><a href="/" onClick={function(event){
    event.preventDefault();
    props.onChangeMode();
  }}>{props.title}</a></h1>
</header>
}
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}>{t.title}</a></li>);
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
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={function(){
        alert('Header');
      }}></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

---

코드 살펴보기

Header 컴포넌트 안에서 링크를 클릭하면 컴포넌트가 onChangeMode의 함수를 호출해 Header라는 경고창을 띄우도록 동작하도록 한다.

<Header title="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header>

onClick이라는 이벤트를 걸어주고 함수가 호출되도록 한다. 그리고 event 객체를 첫 번재 파라미터로 준다.

<h1><a href="/" onClick={function(event){

event.preventDefault();로 a태그가 동작하는 기본 동작을 방지한다.

즉, 클릭해도 reroad가 일어나지 않도록 한다.

 event.preventDefault();

onClick에 함수가 호출되었을 때, props로 전달된 onChageMode 함수를 호출한다.

props.onChangeMode();

---

결과

---

이번에는 각 Nav를 각각 클릭했을 때 경고창이 1, 2, 3이 뜨도록 이벤트를 적용해볼 것이다.

전체 코드

import logo from './logo.svg';
import './App.css';
 
 
function Article(props){
  return <article>
    <h2>{props.title}</h2>
    {props.body}
  </article>
}
function Header(props){
  return <header>
    <h1><a href="/" onClick={(event)=>{
      event.preventDefault();
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}
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 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>
  );
}
 
export default App;

---

코드 살펴보기

함수를 전달할 때 함수의 첫 번째 파라미터로 id값을 주고 함수가 호출될 때 id값이 경고창으로 뜨게 한다.

<Nav topics={topics} onChangeMode={(id)=>{
        alert(id);

파라미터가 한 개인 경우에는 괄호가 생략이 가능하다.

그리고 함수를 호출할 때 id값을 주입해야 하므로 id을 부여해준다.

<a id={t.id} href={'/read/'+t.id} onClick={event=>{

이 이벤트 함수 안에서 a태그의 id속성을 얻어내기 위해 event객체를 사용한다.

target은 이벤트를 유발시킨 태그를 가리킨다. 즉, a태그를 가리키고, a태그의 id값을 가져온다.

props.onChangeMode(event.target.id);

---

결과

이와 같이 이벤트를 가진 컴포넌트를 만들 수 있게 되었다.

 

강의 영상 - https://opentutorials.org/course/4900/31267