React - 입문 기록 5

이벤트를 적용해보자

 

HTML에서는 버튼 클릭에 대한 이벤트를 아래와 같은 방법으로 사용하였다.

<input type="button" onclick="alert('hi')"></input>

 

이를 React에서 같은 기능을 수행하도록 작성하면

- src/App.js

// ..

function Header(props) {
  return (
    <header>
      <h1>
        <a
          href="/"
          onClick={function (event) {
            event.preventDefault(); // 클릭 시 웹 페이지 새로고침 방지
            props.onChangeMode(); // 프롬(컴포넌트의 속성)의 onChangeMode() 함수 실행
          }}
        >
          {props.title}
        </a>
      </h1>
    </header>
  );
}

// ..

function App() {
  // ..
  return (
    <div>
      <Header
        title="WEB"
        onChangeMode={function () {
          alert("Header");
        }}
      ></Header>
      // ..
    </div>
  );
}

export default App;

 

화살표 함수를 적용할 수도 있다.

// ..
        <a
          href="/"
          onClick={(event) => {
            event.preventDefault();
            props.onChangeMode();
          }}
        >
// ..
      <Header
        title="WEB"
        onChangeMode={() => {
          alert("Header");
        }}
      ></Header>
// ..

 

다음은 리스트 1. HTML, 2. CSS, 3. JavaScript를 클릭하였을때 각 번호를 알림창으로 띄우는 기능을 만든다.

src/App.js를 아래와 같이 작성한다.

// ..
const 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() {
  const topics = [
    { id: 1, title: "HTML", body: "HTML is ..." },
    { id: 2, title: "CSS", body: "CSS is ..." },
    { id: 3, title: "JavaScript", body: "JavaScript is ..." },
  ];
  return (
    <div>
      // ..
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(id);
        }}
      ></Nav>
      // ..
    </div>
  );
}

 

Nav 컴포넌트와 같이 이 컴포넌트로 인해 발생된 태그가 여럿일 경우

컴포넌트의 함수를 실행시킬때 그 이벤트를 발생시킨 태그가 누구인지 .target을 통해 명시해주어야 한다.

만약 target이 없다면 어떤 태그가 이벤트를 발생시켰는지 알수 없어 undefined가 출력된다

 

target을 넣어줬을 경우