React 강의 정리 6강

onclick을 통해서 누르면 알림창을 띄울 수 있음

우리도 이제 이벤트를 처리할 수 있도록 하고 싶음

현재는 헤더를 클릭하면 페이지가 리로드가 됨우리가 하고 싶은건 여기 header에 이벤트를 추가하고 싶은거

우리가 하고 싶은건 저 header을 클릭했을때 e=header라는 경고창이 뜨도록 하고 싶어

 

App함수 안의 <Header>에 아래와 같이 추가하자

<Header title="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header>

props로 onChangeMode라는 함수를 주는거

 

이제 Header함수를 한번 보자

function Header(props){
  return <header>
    <h1>
      <a href="/" onClick={function(event){
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a>
    </h1>
  </header>
}

a태그 클릭 했을때 저 함수가 시작되는거

OnClick라는 것을 열고 함수를 실행시킨다.

근데 클릭해도 리로드가 되지 않도록 하고싶어

이때 인자로 적어놓는 event는 이벤트를 실행시킬때 필요한 먼가...

그래서 default를 prevnet하도록 해놓고 

props로 온 것 중 onChangeMode를 쓰는데 이건 함수니까 뒤게 ()를 붙여준다 그러면

이렇게 된다!

 

function 문법이 장황해서 arrow로 바꾸면

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

function Header(props){
  return <header>
    <h1>
      <a href="/" onClick={(event)=>{
        event.preventDefault();
        props.onChangeMode();
      }}>{props.title}</a>
    </h1>
  </header>
}

이렇게 된다

---

이제 하고 싶은건 네비게이션을 선택하면 경고창에 각각 2,3이 뜨게 하고 싶다

function App() {
  const topics =[
    {id:1, title: 'html', body:'html is ...'},
    {id:2, title: 'css', body:'css is ...'},
    {id:3, title: 'javascript', body:'javascript is ...'},
  ] 
  return (
    <div>
      <Header title="WEB" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
      
    </div>
  );
}

인자로 id 값을 줘야 할 것이다.

 

그래놓고 이제 Nav 함수로 넘어가서

nav에서 a태그를 클릭하면 경고창이 뜨면 될것임

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

일단 default한걸 지우고

그리고 parameter이 하나면 괄호를 생략해도 됨 그래서 (event)가 아니라 그냥 event=>라고 해도 됨

그리고 id값을 alert해야 되잖아?

그건 어떻게 가져오냐면 a태그 안에 t.id 값을 id라고 미리 줘라

그리고 그걸 어떻게 가져오냐면

event.target,id

event 객체를 쓰는데 거기서 target가 뭐냐면 이 이벤트를 일으키게 하는 태그임...지금으로 치면 a태그인것!

그래서 a태그의 id값을 가져오라는 거다