4일차 - react 이벤트 기능

✅props 이용해 이벤트 전달하기

function Header(props){
  console.log('props',props.title);
  return (
    <header>
        <h1><a href='/read/' onClick={(event) => {
          event.preventDefault();
          //리로드를 방지
          props.onChangeMode();
        }}>{props.title}</a></h1>
      </header>
  )
}

  return (
    <div className="App">
      <Header title="react" onChangeMode={()=>{
        alert('Header'); 
        //props의 값으로 함수 전달하기
      }}></Header>
    </div>
  );

- react에서 사용하는 것은 유사태그이다. 그래서 html과 똑같이 사용하지 않고 onClick={}등 다른 표기를 사용해주는 것이다.  

-  <h1><a href='/read/' onClick={ (event) => {  props.onChangeMode();  } } ></a></h1>

여기서 a태크를 클릭하면  props.onChangeMode();  함수가 호출되는 것이다. 꼭 props. 를 붙여 사용해야한

 

자바스크립트에서는 addeventlisner 등을 통해 특정 클래스 이름과 함수를 사용해 기능을 구현하는데  react에서는 태그에 함수를 넣어 사용하고 그 값들을 props로 전달이 가능하다. 신기하다!

 

✅props 이용해 이벤트 호출할 때 입력값 주기 -  id값 전달하기 

import logo from './logo.svg';
import './App.css';

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 객체를 첫번째 파라미터로 주입해주기
      event.preventDefault(); 
      //a태그가 기본 동작하는 것을 prevent 해주는 것이다. -> click 해도 reload가 되지 않는다.
      props.onChangeMode(event.target.id); }}>{t.title}
      </a></li>
      )
  }

  return (
    <nav>
        <ol>
          {lis}
        </ol>
      </nav>

  )
}


function App() {
  const topics = [
    {id:1 , title:'html', body:'html is ....'},
    {id:2 , title:'css', body:'html is ....'},
    {id:3 , title:'javascript', body:'javascript is ....'},

  ]
   
  return (
    <div className="App">
      <Header title="react" onChangeMode={()=>{
        alert('Header'); 
        //props의 값으로 함수 전달하기
      }}></Header>
      <Nav topics={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title="welcome" body="hello, web"></Article>
    </div>
  );
}

export default App;

 

 

✔️ push() 를 사용해 빈 배열에 <li> 집어 넣기 

✔️ event.target -> event를 유발시킨 태그를 가르킴 -> a태그

✔️ event.target .id -> event를 유발시킨 태그, a태그의 id값을 가져온 것

✔️  props.onChangeMode(event.target.id); 최종 코드 event를 유발시킨 target의 id 값을 가져옴, 이 코드를 사용하기 위해서는 a태그 안에 id={t.id}를 넣어주면 nav의 li를 클릭했을 때 경고창에 id값과 같은 메세지가 뜬다.