📌 Event

• onChangeMode={} 값으로 함수를 전달하여 props로 가져와 실행한다.
• html 문법은 똑같지 않다. 코드를 작성하면 리액트 개발환경이 최종적으로 브라우저가 이해할 수 있는 html로 컨버팅해주는 것!

// ----- Header -----
function Header(props) {
  console.log("props", props, props.title);
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={(e) => {
            e.preventDefault();    //기본동작 방지
            props.onChangeMode();  // Header의 props로 전달된 onChangeMode가 가리키는 함수를 호출
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}


// ----- Nav -----
function Nav(props) {
  const li = [];
  for (let i = 0; i < props.topics.length; i++) {
    let t = props.topics[i];
    li.push(
      <li key={t.id}>
        <a
          id={t.id}                  // id값 부여
          href={"/read/" + t.id}
          onClick={(e) => {          // 클릭이벤트
            e.preventDefault();
            props.onChangeMode(e.target.id);   // target: 이벤트를 유발시킨 태그를 가리킴 -> a태그
          }}
        >
          {t.title}
        </a>
      </li>
    );
  }
  return (
    <nav>
      <ol>{li}</ol>
    </nav>
  );
}


// ----- App -----
function App() {
  const topics = [
    { id: 1, title: "James", body: "James is ..." },
    { id: 2, title: "Susan", body: "Susan is ..." },
    { id: 3, title: "Amy", body: "Amy is ..." },
  ];
  return (
    <div>
      <Header
        title="Name"
        onChangeMode={() => {
          alert("My Friends");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => { 
          alert(id);                // id값을 알림창에 뜨게 하자
        }}
      ></Nav>
    </div>
  );
}

export default App;