React 이벤트

서론

2024.12.23 - [Web framework/React] - React Prop

React Prop

이전 글에서는 props를 학습하고 실습하면서 글을 정리하였습니다. 이번에는 React 이벤트라는 내용을 학습하고 실습한 내용을 정리하고자 합니다.

 

React 이벤트란?

React 이벤트는 사용자의 입력이나 상호작용(클릭, 입력, 마우스 이동 등)에 따라 발생하는 특정 동작입니다.

• React의 이벤트 시스템은 Javascript의 DOM 이벤트를 감싸는 형태입니다.
• 표준 HTML DOM 이벤트와 비슷하지만 몇 가지 다른 점이 있습니다.

React 이벤트의 특징

• 이벤트 이름은 camelCase로 작성
  • HTML : onclick, onchage
  • React : onClick, onChange
• 이벤트 핸들러는 함수로 전달
  • React에서는 이벤트에 함수 참조를 전달합니다.
• SyntheticEvent 사용
  • React 이벤트 객체는 SyntheticEvent로 감싸져 있습니다.
  • 브라우저 간의 호환성을 보장합니다.
• 기본 동작을 방지하려면 preventDefault() 사용
  • React에서는 명시적으로 이벤트의 기본 동작을 방지해야 합니다.

 

이벤트 실습

<div onclick="alert('hi')">

HTML 이벤트처럼 컴포넌트에 이벤트를 넣고 싶을 때는 다음과 같이 작성하면 됩니다.

 

function App() {
  const lis = [
    {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="React" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav lis={lis}></Nav>
      <Article></Article>
    </div>
  );
}

onChangeMode라는 prop에 함수를 전달하면 됩니다.

 

전달된 함수를 동작시키기 위해 컴포넌트를 다음과 같이 작성해야 합니다. 

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

위에서 설명했듯이 camelCase로 작성합니다. 

 

onClick 에 들어간 콜백 함수를 호출할 때 React는 이벤트 객체를 첫 번째 파라미터로 주입해줍니다. 이 이벤트 객체는 여러가지 상황 정보가 들어가 있는데 preventDefault()를 사용하면 <a> 태그의 기본 동작을 방지합니다.

 

그러고 나서 props.onChangeMode를 입력해서 메인 함수에서 작성한 함수를 호출해서 실행합니다.

 

이번에는 Nav 컴포넌트에 이벤트를 작성해봅니다.

function App() {
  const lis = [
    {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="React" onChangeMode={()=>{
        alert('Header');
      }}></Header>
      <Nav lis={lis} onChangeMode={(id)=>{alert(id);}}></Nav>
      <Article></Article>
    </div>
  );
}

함수에 파라미터 값으로 id를 전달해서 id 값을 출력하는 코드를 작성했습니다.

 

이제 Nav 컴포넌트를 수정하면 됩니다.

function Nav(props) {
  const lis = []
  for(let i = 0; i < props.lis.length; i++) {
    let t = props.lis[i];
    lis.push(<li key={t.id}><a id={t.id} href={'/react/' + t.id} onClick={(event)=>{
      event.preventDefault();
      props.onChangeMode(event.target.id;
    }}>{t.title}</a></li>)
  }
  return <nav>
    <ol>
      {lis}
    </ol>
  </nav>
}

이런 식으로 작성하면 됩니다.

 

일단 어떤 태그를 클릭했는지 알기위해 a태그에 id={t.id}를 작성해서 태그에 id를 가지게 만듭니다.

그리고나서 event로 이벤트 사항을 담은 객체를 받아서 preventDefualt() 함수를 동작해서 <a> 태그의 동작을 막습니다.

이제 event로 어떤 태그인지 확인하고 target로 이벤트를 유발한 해당 태그를 찾은 다음 id를 가져옵니다.

 

즉

• 이벤트 객체를 받음: (event)는 이벤트 객체를 나타냅니다. 이벤트 객체는 이벤트가 발생할 때 브라우저가 자동으로 생성하는 객체로, 다양한 정보를 담고 있습니다. 여기서 event는 이벤트 핸들러에 전달되는 인수입니다.
• event.target: event.target은 이벤트가 발생한 DOM 요소를 참조합니다. 예를 들어, 클릭 이벤트가 발생한 버튼이나 링크가 event.target에 저장됩니다.
• event.target.id: event.target.id는 이벤트가 발생한 요소의 id 속성을 가져옵니다. id 속성은 HTML 요소에서 고유한 식별자 역할을 하며, 이 값을 통해 어떤 요소에서 이벤트가 발생했는지 알 수 있습니다.