만들면서 배우는 react : 기초 - 6

오늘은! 이벤트를 만들고 다뤄볼거다!!!
웹에서는 이벤트가 빠지면… 그냥 물 없는 물고기다; ㅠㅠ

---

const MainCard = ({ img, alt }) => {
  function handleHeartClick() {
    console.log("버튼 클릭");
  }
  return (
    <div className="main-card">
      <img src={img} alt={alt} width="400" />
      <button onClick={handleHeartClick}>🤍</button>
    </div>
  );
}

자 우선은 버튼을 눌렀을 때의 이벤트를 만들거다.
버튼에 이벤트를 걸어줘야겠지…?
클릭했을 때는 onClick로 걸어준다. (html에서는 onclick이다. 대소문자 차이 확실하게 기억해두잡)
이벤트 function명을 {} 안에 적어주기만 하면 된다. 간단~!!!

참고로, 이벤트명을 지어줄 때는 관례가 있다고 한다.
handle[ 원하는 이름 ][ 이벤트 ] 이다.
click이벤트일 땐 handle[ 원하는이름 ]Click
mouseOver일땐 handle[ 원하는이름 ]MouseOver 같은 형태이다.

const Form = () => {
  function handleFormSubmit(event) {
    event.preventDefault();
    console.log("폼 전송됨");
  }
  return (
    <form onSubmit={handleFormSubmit}>
      <input type="text" name="name" placeholder="영어 대사를 입력해주세요" />
      <button type="submit">생성</button>
    </form>
  )
};

이건 배운 방식대로 submit 이벤트를 구현한 것이다 * _ *
전혀 어려울 것이 없다~!!!
어려울 것 같았는데, 막상 배우고 보니 정말 간단해서 놀랐다 ㅎㅎ