[생활코딩] 이벤트

Arrow Function을 이용()=>해서 코드를 나타내보았다.

 

/* Header 컴포넌트 이벤트 기능 넣기*/

 

function Header(props){

    return <header>

        <h1><a href="/" onClick={function(event){ //onClick이라는 이벤트를 발생시킨다. onClick의 C는 대문자이다.

            event.preventDefault(); //event.preventDefault()는 a태그의 기본 동작을 방지한다.(리로드를 방지한다.)

            props.onChangeMode(); //onChangeMode 함수를 호출한다.

        }}>{props.title}</a></h1>  //클릭을 했을 때 페이지 리로드가 되지 않게 하기 위해서 function(event)라고 event 객체를 첫 번째 파라미터로 주입한다.

    </header>

}

 

<Header title="WEB" onChangeMode={function(){ //onChangeMode라는 prop의 값으로 함수를 전달한다.

    alert('Header'); //WEB을 눌렀을 때 Header라는 경고창이 뜨게 한다.

}}></Header>

alert로 Header 메시지 알림

파라미터가 한 개인 경우 () 생략 할 수 있다.

onChangeMode()를 호출하려면 props.onChangeMode(id값);

id값을 얻어내려면 a 태그 안에 id={t.id}를 작성한다.

id값은 event.target.id가 된다. 이벤트를 발생시킨 타겟의 아이디를 나타낸다.

 

1. html을 누르면 1이, 2.css를 누르면 2가, 3.javascript를 누르면 3이 출력