[React] Event handling

• 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것을 이벤트라 함
• 일반적 예시로는

  • onclick
  • onchange
  • onmousehover
  • onkeydown
    등등

✅ 리액트의 이벤트 시스템

• 이벤트 이름은 카멜 표기법으로 작성 (ex. onclick => onClick)
• 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달
• DOM 요소에만 이벤트를 설정할 수 있음 (직접 만든 컴포넌트에 이벤트 자체적 설정 불가)

✅ 예시 - input

• 포스팅하기, 댓글쓰기를 비롯해서 데이터를 입력받아 이를 업로드 하는 과정이 필요할 때가 있음
• 이에 관해 input태그와 onChange, state를 활용한 방법이 있음
• < input>에 입력시 코드를 실행시키고 싶다면
  => onChange / onInput 사용 (둘의 기능은 동일)

// 목록과 제목 state 생성
let [list, setList] = useState(['abc', 'def']);
let [title, setTitle] = useState('');

// input 입력될 때마다 state 변경
<input type = "text" onChange = {(e)=>{
	setTitle(e.target.value)}
}/>

// 버튼 누르면 제목 목록 업데이트
<button onClilck={()=>{
	let copy = [...list];
	copy.push(title);
	setList(copy);
}}>upload</button>

🔸 e

• onChange에서 사용된 "e" 객체는 SyntheticEvent로 웹브라우저의 네이티브 이벤트를 감싸는 객체
• SyntheticEvent는 네이티브 이벤트와 달리 이벤트가 끝나고 나면 이벤트가 초기화
• 비동기적으로 이벤트 객체를 참조할 일이 있따면 e.persist() 함수 호출
• value를 받아오려면 e.target.value, name 받아오려면 e.target.name 등으로 사용

🌟 잘못된 부분에 대한 말씀은 언제나 저에게 큰 도움이 됩니다. 🌟
👍 감사합니다!! 👍