Event

Header Tag를 먼저 보자 onChangeMode가 발생했을 때 alert 화면을 띄운다.

 <div>
      <Header title = "REACT" onChangeMode={()=>{
        alert("Header");
      }}></Header>
      <Nav topics ={topics} onChangeMode={(id)=>{
        alert(id);
      }}></Nav>
      <Article title = "Welcome" body="Hello, WEB"></Article>
    </div>

• preventDefault()는 onClick을 하더라도 화면의 새로고침을 막아준다.
• props.onChangeMode()는 Header Tag의 onChangeMode()함수를 샐행시킨다.

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

• Nav Tag에서 onChangeMode()는 id 값을 인자로 받고 id 값을 화면에 띄운다.
• 인자값을 불러와야 하는 경우 event. target event를 불어 일으킨 target(<a> Tag)의 id값을 가져오게 할 수 있다.
• t.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} onClick={(event) => {
      event.preventDefault();
      props.onChangeMode(event.target.id); //t.id
    }}
      href={"/read/" + t.id} >{t.title}
    </a></li>);
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

React와 Javascript 에서 onclick 문법이 좀 다르다. 헷갈려서 정리 해봤다.

javscript ,React 에서 onclick

javascript 에서 onclick

React에서 onClick과 javascript에서 onclick event는 성질이 좀 다르다.

• javascript 에선 ""를 쓰고 React에선 {}를 쓴다.
• React 에서는 camelCase를 쓴다.

javascript에서 onclick 예시

<button onclick="myFunction()">Click me!</button>

<script>
function myFunction() {
  alert("Hello World!");
}
</script>

React 에서 onClick

React에서 onClick 예시

import React from 'react';

function App() {

  const handleClick = () => {
    console.log('버튼이 클릭되었습니다!');
  };

  return (
    <button onClick={handleClick}>Click me!</button>
  );
}

export default App;