[React] Event handling

Dorong·2023년 1월 3일
1

React

목록 보기
9/29

  • 사용자가 웹 브라우저에서 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 등으로 사용





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

profile
🥳믓진 개발자가 되겠어요🥳

0개의 댓글