9. React Event

하루만에 몇개의 글을 작성하는건지 모르겠지만 또다시 돌아온 효그니에요!

오늘은 React의 이벤트 핸들링에 대해 알아볼겁니다.

Button, Input, Select 등, 사용자의 입력이 들어가는 여러 이벤트에 대해 알아볼겁니다.

사용자 입력 → 이벤트 발생 → 핸들링 → 데이터 처리 → React 렌더링

의 순서대로 진행됩니다.

onClick = { () => { 실행 함수 구문 } }

onClick 메소드입니다. 프레그먼트 ( <> </> ) 를 제외하고 거의 모든 태그에 삽입할 수 있습니다.

인자 값으로는 Event 객체가 들어갑니다.

onClick = { e => { } } 

사용 방식은 저번에도 다뤘었죠?,

<div onClick = { e => alert('클릭!') } />

이런 식으로 사용합니다.

<div onClick = { e => alert('클릭!') } >
	<div onClick = { e => alert('클릭2!') } />
</div>

예외로 이런 상황이 올 수 있습니다.

<div onClick = { e => {
	alert('클릭2!');
	e.preventDefault();
	e.stopPropagation();
}} />

이 두 줄로 후속 이벤트를 막을 수 있습니다.

onChange = { e => { 실행 함수 } }

onChange 의 구문도 onClick과 비슷합니다.

<input onChange = { e => console.log(e.target.value) } />

e.target 는 이벤트가 일어난 해당 객체 (target) 를 가르킵니다.

<input id = "a" name = "b" onChange = { e => console.log(e.target.name, e.target.id) } />

떄문에 value가 아니여도 이와 같이 사용할 수 있습니다.

select 태그에도 똑같이 사용할 수 있습니다.

이상 이벤트 핸들링에 대한 글을 마치겠습니다.