[ React ] 이벤트 핸들링 주의사항

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트라고 합니다

예를 들어 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고 클릭했을 때는 onclick 이벤트를 실행합니다 From 요소는 값이 바뀔 때 onchange 이벤트를 실행합니다

이벤트 사용할 때 주의 사항

1. 이벤트 이름은 카멜 표기법으로 작성합니다
   • HTML의 onclick은 리액트에서는 onClick으로 작성합니다 onkeyup은 onKeyUp으로 작성합니다
2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다
   
   • HTML에서는 이벤트를 설정할 때는 큰따옴표( "" ) 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체를 전달합니다

import React,{ useState } from 'react';

const event = () => { 
  const [message, SetMessage] = useState(''); 
  const onClickEnter = () => SetMessage('안녕하세요!'); 
  const onClickLeave = () => SetMessage('안녕히 가세요!'); 
  return ( 
    <div> 
      {/* 함수 형태의 객체를 전달합니다 */} 
      <button onClick={onClickEnter}>입장</button> 
      <button onClick={onClickLeave}>퇴장</button> 
    </div>)

1. DOM 요소에만 이벤트를 설정할 수 있습니다
   • div, button, input form, span 등의 DOM요소에는 이벤트를 설정할 수 있지만 직접만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없습니다 예를 들어 MyComponent에 onClick를 설정한다면 MyComponent를 클릭 할 때 이벤트 함수가 발생하는 것이 아니라 그냥 이름이 onClick인 props를 MyCompoent에 전달해줄 뿐입니다
   •  따라서 컴포넌트에 자체적으로 이벤트를 설정할 수는 없습니다 하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있습니다
   • import React from 'react'; import MyComponent from './MyComponent'; const event = () => { const [message, SetMessage] = useState(''); const onClickEnter = () => SetMessage('안녕하세요!'); const onClickLeave = () => SetMessage('안녕히 가세요!'); return ( <div> {/* onClick이벤트 함수가 실행 되는것이 아니라 onClick 이라는 props를 전달 해줄 뿐 입니다 */} <MyComponent onClick={onClickEnter} /> </div> }

카멜 표기법

• 풀네임은 camelCase
• "단봉낙타" 표기법각
• 단어의 첫 문자를 대문자로 표기하고 붙여 쓰되, 맨 처음 문자는 소문자로 표기함
• 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식