React를 배워보자4

모든 내용은 유튜브 생활코딩을 보고 만든것입니다.
생활코딩 유튜브 바로가기.

✔️ 이벤트

다음 컴포넌트에 이벤트를 추가해 보자!

<Header title="WEB"></Header>

onCHangeMode에 prop값으로 함수를 전달
그리고 Header 컴포넌트를 클릭했을 때 fuction 함수를 동작하게 만든다.
이 때의 function 함수는 경고창에 Header를 출력하는 것이다!

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

그럼 위의 컴포넌트를 확인해보자!

function Header(props){
  return <header>
    <h1><a href = "/">{props.title}</a></h1>
  </header>
}

다음과 같이 고쳐준다!

a 태그를 onClick 했을 때 function이 동작하는 코드이다.

function Header(props){
  return <header>
    <h1><a href = "/" onClick={function(event){
      event.preventDefault(); // a태그의 기본동작 억제, reload 방지
      props.onChangeMode();
    }}>{props.title}</a></h1>
  </header>
}

다음 결과를 얻을 수 있다!

그리고 function() 은 ()=> 형태로 바꿀 수 있다.
function(event){} = (event)=>{} = event=>{}

Nav 컴포넌트도 수정해보자.

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 href={'/read/'+t.id}>{t.title}</a>
    </li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

onClick 함수 사용

이때 onChangeMode는 id값을 필요로 한다.

따라서 a태그의 id 를 {t.id}를 이용해서 지정해 준다.

event.target.id에 event.target은 event를 유발시킨 태그 즉 a태그를 의미하고
target.id는 a태그의 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>
}

다음과 같은 결과를 얻을 수 있다!