React 이벤트 사용하기

React에서 이벤트를 다루는 방법은 매우 중요합니다. React 컴포넌트 내에서 이벤트를 처리하려면 `onClick`과 같은 이벤트 핸들러를 사용하고, `event` 객체를 활용하여 이벤트 처리 로직을 작성할 수 있습니다. 아래의 코드 예제를 통해 React에서 이벤트를 사용하는 방법을 설명하겠습니다.

import React from 'react';

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

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 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>
      <Header
        title="WEB"
        onChangeMode={() => {
          alert('Header 클릭'); // 클릭 이벤트 핸들러
        }}
      ></Header>
      <Nav
        topics={topics}
        onChangeMode={(id) => {
          alert(`Nav 아이템 ${id} 클릭`); // 클릭 이벤트 핸들러
        }}
      ></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

 

위의 코드에서 주요 포인트는 다음과 같습니다.

1. `onClick` 이벤트 핸들러를 사용하여 클릭 이벤트를 처리합니다. 클릭 이벤트가 발생하면 해당 이벤트 핸들러 함수가 실행됩니다.

2. `event.preventDefault()`를 사용하여 기본 동작을 방지합니다. 예를 들어, `<a>` 태그의 기본 동작인 페이지 이동을 막습니다.

3. `props.onChangeMode()`와 같이 부모 컴포넌트로 이벤트를 전달합니다. 부모 컴포넌트에서 전달받은 이벤트를 처리하거나 상태를 업데이트할 수 있습니다.

4. 부모 컴포넌트인 `App`에서는 `onChangeMode` 함수를 props로 전달하고, 각 자식 컴포넌트에서 해당 함수를 호출하여 이벤트를 처리합니다.

이렇게 React에서 이벤트를 다루면 사용자 상호작용을 처리하고 애플리케이션의 동작을 제어할 수 있습니다.

 

참고영상 : https://opentutorials.org/course/4900/31267