0016. Front-end 공부하기7 - Handling Events

섹션 8. Handling Events

1강. Event의 정의 및 Event 다루기

Event : 사건, 특정 사건을 의미함

이벤트를 처리한다 = 이벤트를 Handling 한다

 

DOM의 Event, 클릭 이벤트를 처리하는 코드

 

버튼이 눌리면 Activate 함수를 호출함

 

리액트의 Event. DOM 코드와 동일한 기능이다.

 

DOM과 다른 점

1. DOM(onclick) vs React(onClick) : camel case. 이름 표기법이 다르다.
2. DOM : 이벤트를 처리할 함수를 문자열로 전달
   리액트 : 함수 그대로 전달

 

출처 : https://ko.wikipedia.org/wiki/%EC%B9%B4%EB%A9%9C_%ED%91%9C%EA%B8%B0%EB%B2%95#/media/%ED%8C%8C%EC%9D%BC:CamelCase.svg

Camel Case : 카멜 표기법

• 낙타의 등의 모양을 보고 이름을 지은 것
  글자의 굴곡이 낙타의 등과 같다고 해서 지어진 이름
  예시 : onClick

 

Event Handler

• 사건이 발생하면 사건을 처리하는 역할
• Event Listener라고 부르기도 함

출처 : soaple

• 이벤트 핸들러 함수인 handleClick 함수 호출
• 다른 함수와 마찬가지로 괄호와 중괄호를 사용하여 클래스의 함수로 정의
• 컨스트럭터에서 bind를 이용하여 대입해 줌
• JSX에서 this의 의미에 대해 유의해야 하는데 바인드를 하는 이유는 JS에서는 기본적으로 클래스 함수들이 바인드 되지 않기 때문
  - 바인드를 하지 않으면 this.handleClick은 글로벌스코프에서 호출됨
  - 글로벌스코프에서 this.handClick은 undefined이므로 사용할 수가 없음
• 이 내용은 리액트뿐만 아니라 JS 함수의 작동원리의 일부분임
• 일반적으로 함수의 이름 뒤에 괄호 없이 사용하려면 무조건 해당 함수를 바인드 해줘야 한다.

 

<Bind에 대한 자세한 내용>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind 

Function.prototype.bind() - JavaScript | MDN

 

출처 : soaple

 

• bind가 번거롭게 느껴진다면 Class field syntax, Arrow function을 사용할 수도 있다.
• Arrow function은 렌더링이 추가로 일어날 수 있기 때문에 성능 측면에서 바인딩이나 Class field syntax를 사용하는 것을 권장함.

 

함수 컴포넌트에서 이벤트를 처리하는 방법

출처 : soaple

 

함수 컴포넌트 내부에서 이벤트 핸들러를 정의하는 방법은 두 가지가 있다.

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

함수 컴포넌트에서는 이벤트를 넣어 줄 때 this를 사용하지 않고 onClick={handleClick}처럼 곧바로 정의한 이벤트 핸들러를 넘기면 된다.

 

 

Arguments 전달하기

• Argument : 주장, 논쟁, 말다툼
  - 함수에 주장할 내용, 함수에 전달할 데이터
  - Event Handler에 전달할 데이터
• Parameter 매개변수
  - Argument와 비슷한 의미로 쓰인다.

출처 : soaple

argument를 eventhandler에 전달하는 방법

1. 위는 arrow function 사용
   - event를 명시적으로 매개변수로 정의
2. 아래는 bind를 사용
   - event가 자동으로 id 이후에 두 번째 매개변수로 전달

• 이벤트라는 매개변수는 리액트의 이벤트 객체를 의미
• 첫 번째 매개변수는 id, 두 번째 매개변수로 이벤트가 전달
• 위의 방법은 클래스 컴포넌트에서 쓰는 방법이므로 지금은 거의 하고 있지 않은 방법임

출처 : soaple

 

 

함수 컴포넌트에서는 이벤트 핸들러에 매개변수를 전달할 때 위와 같이 함

 

 

2강. (실습) 클릭 이벤트 처리하기

1) (실습) Class 컴포넌트 Bind 사용하기

ConfirmButton만들기

 

 

사실 이 전에 eslint 에러가 났다.

ESLint는 JavaScript 코드에서 문제를 찾고 코드 스타일을 검사하기 위한 도구이다. 이는 개발자들이 일관된 코드 스타일을 유지하고 잠재적인 버그를 미리 발견할 수 있도록 도와준다.

이런 에러였는데, 사용하지 않는 줄에 대해서 쓸데없으니 없애라는 것 같았다.

그래서 문제가 생긴 4, 7, 8, 9, 10, 11 라인을 주석처리(//) 해버리니까 문제가 해결됐다.

 

완성된 모습

 

문제는 확인하기를 누르면 버튼이 비활성화되어야 하는데 그게 되지 않는 것이었다.

역시 에러와의 싸움인가

 

소문자로 썼다..

챗GPT 없이 에러를 발견했다!

 

에러 해결!

 

 

2) (실습) Class fields syntax 사용하기

bind를 삭제하고 arrow function으로 변경

 

동일한 결과 출력

 

3) (실습) 함수 컴포넌트로 바꿔보기 (제일 많이 씀)

• state : useState Hook을 사용하여 처리
• eventhandler : arrow function 사용하여 만듦

 

동일한 결과!