[React] Event

Event

Header Component에서 onChangeMode props의 값으로 function를 전달한다.

Header를 클릭했을떄 함수를 실행하고 싶을때 사용한다.

앵커태그에 onClick 이벤트를 걸어주면

앵커태그를 클릭했을때 function을 호출한다.

그리고 앵커태그를 클릭했을때 페이지 이동을 막을려면

onClick에 콜백함수로 들어간 함수가 호출될때 event 객체를 첫번째 파라미터로 주입해준다.

event.preventDefault();로 앵커태그의 기본 동작을 방지한다.

그다음 props로 보내준 onChangeMode를 호출한다.

 

---

Nav Component를 클릭했을때 id 1, 2, 3 별로 1, 2, 3이라는 alert을 띄우고 싶으면

Nav Component는 onChangeMode props의 값으로 함수를 전달한다.

여기서 첫번째 파라미터로 id 값이 들어가게끔 한다.

그 id 값이 경고창으로 출력되게 만들어 준다.

그 다음 Nav안에 앵커태그에 onClick을 event객체

event.preventDefault();로 앵커태그의 기본 동작을 방지한다.

Nav에 onChangeMode를 호출하고 id 값을 주입하고 싶으면

앵커태그에 id = {t.id} 로 부여해준다

그러면 이벤트함수 안에서 event.target.id 로 id 값을 가지고 온다.