[React] 이벤트

1. 이벤트1 - 인자값이 없는 경우

태그 안에 원하는 이벤트를 수행할 함수를 넣어서 사용하면 된다.

function( ) 대신 arrow function 문법으로 써도 된다.(보통 이렇게 많이 씀)

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


# function App()
function App() {
  return (
    <div>
      <Header
        title="REACT"
        onChangeMode={function () {
          alert("Header!~");
        }}
      ></Header>
    </div>
  );
}

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


# function App()
function App() {
  return (
    <div>
      <Header
        title="REACT"
        onChangeMode={() => {
          alert("Header!~");
        }}
      ></Header>
    </div>
  );
}

 

 

2. 이벤트2 - 인자값이 있는 경우

props.onChangeMode(event.target.id); 를 보면, Header 컴포넌트에서 props.onChangeMode(); 와는 다르게 onChangeMode에 인자가 들어있는 것을 볼 수 있다.

 

event.target.id에서 target은 해당 event가 발생하는 위치인 a 태그를 뜻한다.

따라서 event.target.id는 a태그의 id값을 뜻한다.

# 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
          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>
  );
}


# function App()
function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "jabascript", body: "jabascript is ..." },
  ];
  return (
    <div>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
    </div>
  );
}

 

 

3. 전체 코드

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

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

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>
  );
}

function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function App() {
  const topics = [
    { id: 1, title: "html", body: "html is ..." },
    { id: 2, title: "css", body: "css is ..." },
    { id: 3, title: "jabascript", body: "jabascript is ..." },
  ];
  return (
    <div>
      <Header
        title="REACT"
        onChangeMode={() => {
          alert("Header!~");
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;