React 이벤트 처리하기 (함수 컴포넌트 ver)

1. 소문자 대신 캐멀케이스(camelCase)를 사용

• 지키지 않으면 문법적으로 오류. 작동하지 않는다.
• 기존 html

<button onclick="?"></button>

• React JSX

<button onClick={?}></button>

2. 이벤트핸들러 전달방식

• 기존 html

<button onclick="testTest()"></button>

• React JSX

<button onClick={ testTest }></button>

// 참고) e.target을 사용하는 법?
<input name="username" onChange={ onCheck } placeholder ="이름" /> // 1번) 함수명만 넣어주고

const onCheck = (e) => { // 2번) 여기에는 매개변수를 넣어서 사용하면 된다
  console.log(e.target); // <input name="username" placeholder="이름">
  console.log(e.target.name); // username
}

3. 이벤트 전파를 중단하는 법

• 기본 설명

1) event.preventDefault()
현재 이벤트의 default 동작만 중단한다. (예를들면 <a>태그의 경우, 클릭하면 명시된 href로 이동하는 것이 default 동작이다)
상위로 이벤트 전파는 막지 않는다.

2) event.stopPropagation()
현재 이벤트 동작만 실행한다. (단, 해당요소에 여러개의 이벤트을 걸어놨다면, 해당요소에 있는 다른 이벤트들의 동작은 막지 X)
현재 이벤트가 상위로 bubbling 혹은 capturing 되는 것을 막는다. 즉, 상위로 이벤트 전파를 막는다.

3) event.stopImmediatePropagation()
현재 이벤트 동작만 실행한다. (+ 해당요소에 여러개의 이벤트을 걸어놨다면, 해당요소에 있는 다른 이벤트들의 동작까지 모두 막는다)
현재 이벤트가 상위로 bubbling 혹은 capturing 되는 것을 막는다. 즉, 상위로 이벤트 전파를 막는다.

4) return false;    ---> React, JS addEventListener(non-jQuery 일때) 사용 불가능!
jQuery event handler의 경우는, stopPropagation()과 preventDefault()을 모두 수행한 것과 같고.
그 외의 handler 경우(non-jQuery)에서는, onclick handler에 사용했을 경우에 preventDefault()를 수행한 것과 같다.

• 기존 html vs React JSX

// 기존 html
<a href="url이 들어있다고 가정" onclick="testTest()"> 테스트 </a> // 1번) 테스트라는 글씨를 클릭
function testTest() { // onclick이벤트로 안녕하세요 라는 알림이 뜨고
  alert("안녕하세요");
  return false; // return false로 인해, href 실행이 안되면서 -> 페이지 이동이 발생하지 않고 종료. (물론 preventDefault도 사용가능)
}

// React JSX
<a href="url이 들어있다고 가정" onClick={ testTest }> 테스트 </a>
function testTest(e) {
  e.preventDefault(); // 반드시 preventDefault()를 사용해줘야 한다. (React에서는 return false 작동안함)
  alert("안녕하세요");
}

• 기본 예시

import React, {useState} from "react"

const Banner = () => {
  function tenPercent() {
    alert("10% 할인 쿠폰에 당첨 되었습니다.")
  }

  const [ visible, setVisible ] = useState(true);

  function bannerHide(e) {
    // 1번) tenPercent()의 알람창이 뜨지 않고, 바로 닫기가 실행되도록
    e.stopPropagation();

    // 2번) 숨기는 기능은 true & false로 처리할 수 있다
    setVisible(false);

    // 3번) 만약 alert("안녕하세요");을 넣으면? -> 안녕하세요라는 알람창은 뜨고 -> tenPercent()의 알람창은 뜨지 않고 -> 닫기가 실행.
  };


  return visible && (
    <div onClick={ tenPercent }>
      이 곳을 클릭해서 쿠폰을 받아가세요.
      <button onClick={ bannerHide }> 닫기 </button>
    </div>
  );
};

export default Banner;