[React] 리액트 '이벤트 핸들링'이 뭘까?

<목차>

 

1. 이벤트 핸들링 등장배경 

2. 이벤트 핸들링 코드 예제

 

 

 

* html과 자바스크립트 기초가 있다는 가정하에 작성된 글입니다.

* 리액트 컴포넌트와 props를 알고 있다는 가정하에 작성된 글입니다.

---

1. 이벤트 핸들링 등장배경

 

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

 

버튼을 클릭하면 hi라는 알람이 뜨는 코드를 작성했다.

위에서 onClick은 버튼을 클릭했을 때 이런 사건(이벤트)을

일으켜줘!란 의미로 위에선 버튼을 클릭했을 때

알람(alert)으로 hi가 뜨도록 해줘라고 작성되어 있다.

 

리액트 컴포넌트의 경우 props를 통해 속성을 지정해 줄 수 있었다.

* 리액트의 props를 잘 모른다면? '리액트 props가 도대체 뭘까?'를 참고해 주세요!

 

이제 속성뿐만 아니라 이벤트 기능도 넣어주고 싶다.

위에처럼 버튼을 클릭하면 알람이 뜨는 이벤트 기능같은 것 말이다.

 

이번 글에선 컴포넌트에서 이벤트가 발생할 수 있도록

만드는 방법에 대해 알아볼 예정이다.

---

2. 이밴트 핸들링 코드 예제

 

 

function App() {
  return (
    <div>
      <Header title="WEB"></Header> 
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

 

div 태그 아래에 있는

Header 컴퍼넌트의 이벤트 기능을 만들어 보고자 한다.

 

 

WEB을 클릭했을 때 'Header'라는 알림(alert)가 뜨도록 만드는 게 목표다.

 

function App() {
  return (
    <div>
      <Header title="WEB" onChangeMode={function(){
        alert('Header');
      }}></Header> 
      <Nav></Nav>
      <Article title="Welcome" body="Hello, WEB"></Article>
    </div>
  );
}

 

onChangeMode란 속성(props)을 만들어 준 뒤

alert('Header');를 작성해서 클릭 시 Header란 알람이 뜨도록 만들었다.

 

Header 컴퍼넌트는 손 봤으니

이제 Header 태그를 손 볼 차례다.

 

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

 

버튼을 클릭했을 때 특정 사건(이벤트)가 발생해야 하니까 onClick을 사용했다.

onClikc 함수는 버튼을 클릭했을 때

무슨 사건(이벤트)가 발생하도록 해줘.란 의미다.

 

여기선 a 태그 즉 WEB이란 글씨를 클릭했을 때

onClick 옆에 있는 function(함수) 안의 내용을 실행시켜줘.란 의미가 된다.

 

 

이제 Header 컴포넌트에 있는 onChangeMode 속성을

불러와 주면 끝나는데 그 전에 해줘야 할 작업이 있다.

 

현재 WEB이란 글씨(버튼)를 클릭하면 

페이지가 새로고침되는 걸 확인할 수 있다.

 

페이지가 새로고침(리로드)되지 않도록 해주려 한다.

 

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

 

function의 파라미터로 event를 넣어준 뒤

event.preventDefault(); 라고 작성해주면

버튼을 클릭했을 때 웹 페이지가 새로고침되는 걸 방지해준다.

 

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

 

이제 onChangeMode와 연결해주면 된다.

 

위의 코드에서 props.onChangeMode는

Header 컴포넌트에 있는 onChangeMode 속성의 값

function(){ alert('Header'); 를 가리킨다.

 

그래서 WEB이란 글씨를 클릭하면

Header 컴퍼넌트가 onChangeMode 속성이 가리키는

함수인 function(){ alert('Header'); 를 불러오는 것이고

alert('Header')가 실행되서 최종적으로 Header 글자가 포함된 알림창이 뜬다.