React_Event

이번에는 클릭했을 때, 동작하는 것에 대해 알아보자.

      <Header title="REACT" onChangeMode={()=> {
        alert('Header')
      }}></Header>

기존 코드에서 Header 태그에 함수로 상속해준 함수 onChangMode를 만들어주었다.

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>
}

onClick 함수는 기본적인 인자로 event를 받고, 리로딩을 방지하는 메서드 event.preventDefault(); 를 넣어주었다.

Header태그에서 상속받은 함수 onChangMode()를 작성하고 클릭하면 아래와 같은 결과가 나온다.

onChangMode()

---

이번에는 nav태그로 생성한 lst에 이벤트를 넣어보자.

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

이번에는 클릭 시, id를 출력하는 이벤트를 만들어보자.

function Nav(props) {
  const lst = []
  for (let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lst.push(<li key={t.id}>
      <a id = {t.id} href={"/read/"+t.id} onClick={(event)=> {
        event.preventDefault();
        props.onChangMode(event.target.id)
      }}>{t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lst}
    </ol>
  </nav>
}

마찬가지로 상속받은 함수를 출력한다.

 

여기서 궁금한 점, onChangMode(t.id)와 onChangMode(event.target.id)의 결과가 같다.

 

console.log로 출력시, event.target은 클릭한 a태그를 의미하고, 태그에 id를 부여해줘서, 값을 alert해주게끔 작성되었다.

console.log(t)를 하는 경우, 클릭한 객체가 출력됨을 확인할 수 있다.

 

---

- 내용 정리 및 후기

 

event 동작 함수는 가장 큰 컴포넌트 App에 작성하고, 클릭할 대상 컴포넌트에서 preventDefault를 해줬다.

만약, 같지만 쓰임새가 다른 태그에서 preventDefault를 해야할 경우, App에서 처리해주면 되겠다.

 

오늘 지각을 했다. 사실 지각하지 않을 수 있었고, 맞게 일어났지만 동기부여가 되지 않는 느낌을 받았다.

1학기에는 힘들어도 옆에서 같이 나아가는 사람들이 있었는데, 이번에는 혼자 해야한다는 책임감과 압박감이 있어서 그런지 평소 잘 해내는 것들도 틀어져버리는 느낌을 받는다.

아직 동기부여가 되지 않지만, 이상한 생각들로 둘러쌓인 모습을 생각하며 되돌아보는 하루가 됬다.

일단 열심히 하자. 그리고 생각해야겠다. 그리고 등은 배신하지 않아. 너무 즐겁다.

 

수고했어 오늘도.

필요할 때 솔직하게 말할 줄 아는 사람이 되자.