[004] 리액트 (React) 배우기 - 함수형 컴포넌트 Event 사용(버튼 클릭, 폼 제출 이벤트 만들기)

안녕하세요~ totally 개발자입니다.

 

Event

 

오늘은 함수형 컴포넌트의 이벤트, 버튼 클릭했을 때 이벤트를 만들어보도록 하겠습니다.

 

Step 1: HelloWorldComponent.js 파일에서 7번째 줄처럼 button를 추가하고 onClick={} 형태로 적어줍니다. 여기에 바로 자바스크립트 코드를 넣어주셔도 되고 사전에 함수를 선언하여 여기에 적어주면 됩니다. 먼저 () => alert 방식으로 바로 넣어주었습니다.

 

 

버튼을 눌렀을 때 alert 메시지가 잘 나오는 것을 확인할 수 있습니다.

 

 

Step 2: Step 1에서 사용했던 것처럼 그대로 onClick 안에 적어주는 것보다는 다음처럼 함수를 미리 선언한 후에 넣어주는 것을 권장합니다. 

 

 

Step 3: 이번에는 양식 제출(Form Submit) 예제로 실습해보겠습니다. 먼저 간단한 실습을 위해 아래 코드처럼 간단한 Form을 하나 만들어주도록 하겠습니다. autoComplete='off'는 각 입력값을 클릭했을 때 기존에 입력했던 값들이 자동으로 뜨지 않도록 방지하는 기능입니다. 

 

import React from 'react';

function HelloWorldComponent() {
  return (
    <div>
      <h1>Form Submission</h1>
      <form autoComplete='off' >
        Last Name: <input name="lastName" /> <br /><br />
        First Name: <input name="firstName" /> <br /><br />
        Job: <input name="job" /><br /><br /><br />
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default HelloWorldComponent;

그 다음 아래 5~12번째 줄처럼 Form를 제출했을 때 필요한 함수와 각 input을 입력했을 때 콘솔에서 값을 확인할 수 있도록 해주는 함수를 각각 선언하여 만들어줍니다. 6번째 preventDefault 함수는 기본적으로 정의된 이벤트를 실행하지 못하도록 방지해주는 함수이며 form을 제출하게 되면 href나 창이 새로고침되기 때문에 이것을 일단 방지해주기 위해 사용합니다. 그 후 alert 메시지로 제출되었는지를 확인해보면 됩니다. 10~12번째 줄에 보면 e.target.value를 사용한 것을 볼 수 있는데 만약 Last Name 오른쪽에 입력칸에 마우스를 클릭하면 이 때 e.target는 <input name="lastName">이 되고 e.target.value를 사용하면 이 입력값을 가져올 수 있습니다. 

 

실행한 결과는 아래와 같고 개발자 도구를 이용하여 콘솔에서 보시면 아래 우측처럼 Value가 변경될 때마다 출력되는 것을 알 수 있습니다. 다음 시간에는 state에 관해 살펴보겠습니다.

 

[전체 소스 코드]