[React,냥짤메이커] event를 다뤄보자!

우린 이제
component를 만들줄도 알고,
그 안에 element를 넘길줄도 알고,
받은 element의 property도 손볼줄 알고,
화면에 그릴줄도 안다!

이벤트 다루기

그럼 이제 그린 화면에다 유저가 어떤 행위를 했을 때, 사이트가 알아듣고 반응할줄 아는 기능을 넣어보자.

만약 form 내부에 있는 눌러보쇼 라는 button을 누르면 submit 되고 새로고침되는걸 막고싶다면!

const Form = () => {
  function handleSubmit(e) {
  	e.preventDefault();
  }
return (
	<form onClick={handleSubmit}>
  	<button type="submit">눌러보쇼</button>
  </form>
);
}

요런식으로 작성해주면 된다. e는 event고, JS 문법인 preventDefault를 사용해 submit이 되면 새로고침이 되는 기본기능을 막아준다!
요기서 새로 배운건

form 태그 내부에서 click 감지 -> 
  handleSubmit 을 값에 넣어서-> 함수 호출

억게이 이제 난 이벤트의 신이다

아니다 만약에 click하고싶을 때마다 뭔가 변화를 시키고 싶으면 어쩔건데??

React Hooks 정리
얼마전에 별코딩님과 John Ahn님 유튜브를 보면서 이래저래 뒹굴댕굴 정리했었는데, react hooks를 이용해서 생각보다 훨씬 더 간단하게 상태를 관리할 수 있다!!!