React에서 Event 처리 어떻게 할까?

React에서 Event 처리 어떻게 할까?

 

이전 글에서 React 컴포넌트를 만들고,

컴포넌트에 데이터를 전달하고,

컴포넌트로 전달받은 데이터는

props로 꺼내어 사용하는 방법까지 익혔다.

 

이전 글

2023.06.18 - [JS] - React.js Start 리액트 시작하기, React App 만들기

2023.06.19 - [JS] - React Props에 대해 알아보자. Component에 데이터 보내기

 

이번에는 React에서 Event 처리에 대해 알아보자.

 

 

 

반응형

 

 

 

현재까지 작성한 코드 예제를 보자.

function Header(props) {
  console.log("props",props,props.title)
  return <header>
        <h1><a href="/">{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 href={'/read/'+t.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:'javascript', body:'javascript is ...'}
  ]
  return (
    <div>
      <Header title="WEB"></Header>
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

export default App;

현 예제 실행한 브라우저 속 화면

 

Header 컴포넌트의 WEB이라고 쓰인 제목 부분 클릭 시

a태그로 감싸져 있기 때문에 reload가 될 것이다.

 

먼저 'WEB' 제목을 클릭했을 때

화면 reload를 막도록 코드를 작성해 보자.

a 태그의 기본 event를 막는 것이다.

 

추가한 코드 부분이다.

일반적인 html에서 onClick 이벤트를 설정하는 문법과 약간 다르다.

 

중괄호( { } )를 사용해서 해당 이벤트에 javascript 코드를 넣어서

a 태그의 기본 이벤트 기능을 막는다. ( event.preventDefault(); )

 

arrow function으로 수정해도 똑같이 동작한다.

 

다음은 Header를 호출하는 App 컴포넌트에서

Header 컴포넌트로 이벤트를 전달하고

Header 컴포넌트에서 전달받은 이벤트를 호출하자.

 

 

onChangeMode라는 속성명으로 함수를 전달하고 있다.

기능은 alert('Header');

 

이를 사용하려면?

 

이전에 학습했던 props를 사용하면 된다.

props를 사용해서 전달받은 이벤트를 호출한다.

 

그러면

Header 제목을 클릭하면

기능 alert('Header'); 가 실행된다.

 

 

nav의 메뉴들에도 이벤트를 부여하자.

Nav 컴포넌트에도 onChangeMode 라는 속성명으로 함수를 전달한다.

기능은 파라미터로 들어온 id 값을 alert(id) 하는 기능이다.

Nav 컴포넌트에선 각 nav의 메뉴들에 감싸진

a 태그에 onClick 이벤트 리스너를 부여하고

기본 event를 막고 ( event.preventDefault(); )

props로 전달받은 onChangeMode 함수 이벤트를 호출한다.

 

a 태그에 id 값을 부여하고, 해당 id 값을 출력하도록

인자로 event.target.id 를 넣는다.

 

event는 발생한 이벤트 정보를 나타내고,

target은 발생한 이벤트의 타깃, 즉 이벤트 발생시킨 엘리먼트를 가리킨다.

event.target.id는 a태그에 부여되었던 id 값에 접근하는 것이다.

 

---

React

Component, Props에 이어서 Event에 대해서 알아보았습니다