React #5 이벤트

만약 사용자가 정의한 컴포넌트에서 alert 이벤트를 실행할 수 있도록 하고 싶다면,

 

<Header title="WEB" onChangeMode={

function(){

alert('Header');

}

}></Header>

로 작성하여 onChangeMode에서 function을 옮겨주고,

 

function Header(props){

return <header>

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

event.preventDefault();

props.onChangeMode();

}}>{props.title}</a></h1>

</header>

}

작성.

이때 onclick으로 쓰지 않고 onClick과 같이 대문자인 이유는

유사 HTML이기 때문에 React는 onClick으로 작성해야 하기 때문.

event.preventDefault()는 태그의 기본 동작을 막고(리로드 방지),

props.onChangeMode()로 함수를 실행한다.

 

 

function(event) 대신

(event)=> 또는 event=>로 변경가능.

(인자가 하나 밖에 없다면 괄호도 생략 가능)

 

 

 

만약,

const topics = [

{id:1, title:'html', body:'html is ...'},

{id:2, title:'css', body:'css is ...'},

{id:3, title:'javascript', body:'javascript is ...'}

]

 

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

alert(id);

}}></Nav>

처럼 alert를 통해 각 id를 나타내고 싶다면,

 

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>

}

위와 같이 작성.

이때 event.target.id에서

target은 event를 발생시킨 태그(여기서는 a 태그)를 가리킨다.

따라서 각 a 태그의 id를 alert 동작하게 된다.