[React] Handling Events 이벤트 핸들링

이 글은 인프런 강의 소플의 처음 만난 리액트(React) 강의를 보고 정리했습니다.
https://www.inflearn.com/course/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8

이벤트?

• 사건
• 특정 사건을 의미
• 사용자가 버튼을 클릭한 사건 → 버튼 클릭 이벤트
• 이벤트 처리 = 이벤트를 헨들링한다.

<Dom의 이벤트 → onclick으로 처리>

<button onclick="activate()">
	버튼입니다.
</button>

<리액트의 이벤트>

<button onClick={activate}>
	버튼입니다.
</button>

⇒ 차이 : onClick 대문자와 “”, { }

• camel표기법 ⇒ 낙타의 등 = 첫글자 소문자고 중간은 대문자. camelCase

Event handler

: 어떤 사건이 발생하면 사건을 처리하는 역할

Event Listener

: 이벤트 헨들러가 일어나면 계속 듣고 있음

방법

1. 함수 안에 함수로 정의
2. arrow function을 사용하여 정의

Argument

= 주장 : 함수에 주장할 내용

= 함수에 저장할 데이터를 뜻함
= event handler 에 전달할 데이터

= 파라미터

= 매개변수

• 이벤트 헨들러에 저장하는 방법

→ 위 클래스 컴포넌트는 동일한 역할을 하지만

위에는 arrow 함수를 사용했고

아래는 bind를 사용했다.

어떤식으로 매개변수를 이벤트 핸들러에 저장하는지 ?

→ 이벤트라는 매개변수는 리엑트의 이벤트 객체를 의미한다

→ 첫번째 매개변수는 id이고 두번째 매개변수는 event 가 전달된다.

• 1번 코드
  : 명시적으로 이벤트를 두번째 매개변수로 넣어준다
• 2번 코드 : 이벤트가 자동으로 id이후에 두번째 매개변수로 전달된다 ⇒ 위에 코드들은 클래스 컴포넌트에서 사용됐고 요즘은 안쓴다,
  

즉, 요즘은 함수 컴포넌트에서는 아래처럼 사용되고

매개변수 순서는 원하는대로 변경해도 상관없다.