[react] 기본 정리 2

📌event

00. a태그에 onclick되는 event를 만들어보자

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="#none"
          onClick={(e) => {
            e.preventDefault(); 
            props.onChangeMode();
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
    //html의 유사하게 만든 것으로 props로 받아올 데이터를 위해 event를 preventDefault()함
  );
}
// app
function App() {
  return (
    <div className="App">
      <Header
        title="title"
        onChangeMode={() => {
          alert("Header 입니다.");
        }}
      ></Header>
  );
}

📍 onClick={function(event){}} : props로 받아올 event가 파라미터이다.
📍 event.preventDefault() : 기존의 a태그의 이벤트를 막음 ( 하단의 onChangeMode() 이벤트를 걸어주기 위함 )
📍 props.Event() : props로 onclick()시 실행될 이벤트를 받아옴

01. 리스트(데이터)가 있는 경우 event 걸기

function Nav(props) {
  const array = [];
  for (let i = 0; i < props.list.length; i++) {
    let li = props.list[i];
    array.push(
      <li key={li.id}>
        <a
          id={li.id}
          href={"/read/" + li.id}
          onClick={(e) => {
            e.preventDefault();
            props.onChangeMode(e.target.id);
          }}
        >
          {li.title}
        </a>
        <p>{li.body}</p>
      </li>
    );
  }

  return (
    <nav>
      <ul>{array}</ul>
    </nav>
  );
}
// app
function App() {
  const list = [
    { id: 1, title: "one", body: "header" },
    { id: 2, title: "two", body: "nav" },
    { id: 3, title: "three", body: "body" },
  ];
  return (
    <div className="App">
      <Nav
        list={list}
        onChangeMode={(id) => {
          alert(id + "입니다");
        }}
      ></Nav>
    </div>
  );
}

📍 list 속 각각의 id(key)값에 맞게 들어가야함 위의 a태그와 거의 동일하지만, props.onChangeMode(e.target.id); 해당 id가 있어야 각각의 리스트 속에 맞게 실행됨