Capturing vs Bubbling

import React from 'react'

export default function EventComponent() {

    const handleButtonClick = () => {
        console.log('handleButtonClick');
    }
    const handleClickCapture = () => {
        console.log('handleClickCapture');
    }
    const handleClickCapture2 = () => {
        console.log('handleClickCapture2');
    }
    const handleClickBubble = () => {
        console.log('handleClickBubble');
    }
    const handleMouseLeave = () => {
        console.log('handleMouseLeave');
    }

    //React는 이벤트들을 다른 브라우저에서도 같은 속성을 가지도록 표준화한다.
    //다음 이벤트 핸들러는 이벤트 버블링 단계에서 호출된다.
    //capturing -> capturing ->capturing   < bubbleing
    //자식보다 부모가 먼저 click을 인지하고 싶을때 onClickCapture를 사용하자.


    //합성 이벤트 -> 인터페이스는 같지만 직접 대응되지 않는다. systhentic event객체를 받고 그안에 native이벤트가 있으니깐 찾아서 써라
    //Bubble(자식 ->부모) /Capture(부모 ->자식) -> Capture > target >Bubble
    //return false(원래는 default이벤트를 안동작하게 할수있는데 react에서는 동작하지 않는다.) -> e.preventDefault()를 해줘야함.
  return (
      
    <div onClickCapture={handleClickCapture}>
    <div onClickCapture={handleClickCapture2} onClick={handleClickBubble} >
        <button onClick={handleButtonClick} onMouseLeave={handleMouseLeave}>button</button>
        </div>
        </div>
  )
}