[TIL] 2020-03-19

[ groomedu ]

- 처음 만난 React(리액트) Handling Events까지 수강

 

[ 배운 내용 ]

Event란?
어떤 특정한 하나의 사건을 의미하며, 버튼 클릭을 하는 사건, 즉 버튼을 클릭하는 이벤트를 뜻한다.
사용자가 웹 페이지에서 어떠한 버튼을 클릭한 사건이라고 볼 수 있다. 
예를 들어,

<button onClick={activateLasers}>
	Activate Lasers
</button>

 

버튼이 하나가 있고, onClick이 안에 어떠한 함수를 선언해 놓았다.
버튼을 클릭 했을 때, 이 이벤트가 발생을 하고 이 이벤트가 발생했을 때, 어떠한 처리를 하겠다는 의미를 뜻한다.

DOM에도 이벤트가 있고, React에도 이벤트가 있다.

[ HTML ]

<button onClick="activateLasers()">
	Activate Lasers
</button>

 

[ React ]

<button onClick={activateLasers}>
	Activate Lasers
</button>

- React 같은 경우에는 소문자 대신에 흔히 camelCase라고 부르는 것을 사용하는데, on부분은 소문자로 되어있고, Click 부분의 c가 대문자로 시작한다.
- 이벤트를 전달할때, 문자열이 아닌 함수를 전달한다.
- 여기서 함수는 이벤트를 처리하는 함수를 의미한다.

여기서 camelCase란?
- 낙타를 camel이라 부르며, 마치 낙타의 등처럼 중간에 나오는 새로운 단어의 첫 시작 부분의 알파벳을 대문자로 하는
것을 camelCase라고 부른다.
- 리엑트에서의 함수를 핸들링하는 부분에서는 camelCase를 사용한다.

Event Handler란?
- 이벤트를 처리하는 함수를 의미한다.
- 어떠한 사건이 발생하면, 그 사건을 처리하는 역할을 한다.
- Event Listener라고도 부른다.
- 이벤트 처리할때, bind(this)를 사용한다.

Event Handler에 Arguments 전달하기
Arguments란 영단어로 논쟁, 말다툼을 의미하며, 어떠한 주장이라고도 이해하면 된다.
- 즉 함수에 주장할 내용 혹은 함수에 전달할 데이터라고 이해하면 된다.
- Event Handler에 전달할 데이터를 Arguments라고 하지만, Parameter라고도 부른다.