[React.js] 리액트의 이벤트 작성

 

<Header></Header>

<Nav></Nav>

<Article></Article>

 

3개의 태그 중에 빨간색 박스로 표시된 <Nav> 태그를 보자.

태그 안에 topics와 onChangeMode가 보이는데 화면의 <Nav> 태그에서 당장 실행되는게 아니라

태그로 설정된 html 부분에 props로 값을 넘겨주는 역할을 한다.

 

그림이 허접한데 대략 이런 느낌이다.

작성된 태그로 표현하면

 

 

function Nav(props) {} 내부에 보면 <a>태그 안에 onClick 기능을 만들어서

onChangeMode 기능을 수행한다.

 

event.preventDefault();는 쉽게 말해서 새로고침을 막아주는 것이다.

구현할 기능은 간단한 알람창이 뜨는 기능인데 이것을 위해서

문서를 재랜더링 할 필요가 없기 때문이다.

 

여기서 event.target은 이벤트를 발생시킨 주체. 

즉 event가 일어나게 만든 원인인 a 태그를 말하는데(설명이 묘하다)

a태그에서 id로 설정한 {t.id}를 클릭 할 때마다 보여준다.

 

...

 

그냥 태그 누를 때마다 알람창으로 1, 2, 3 뜨는거다.

 

 

 

 

이렇게 ^ㅁ^