React Modal창 구현

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);
  // Modal창이 열려있는지, 닫혀있는지의 status. 현재는 isOpen의 상태는 false. 즉, 닫혀있는 상태. 


  const openModalHandler = () => {
    setIsOpen(!isOpen);
    // Event Handler. isOpen의 status를 setIsOpen함수를 통해 변경.
    // 만약 isOpen이 false면 ---> true로 변경, isOpen이 true면 ---> false로 변경.
  };


  return (
    <>
      <ModalContainer>
        <ModalBtn onClick={openModalHandler}>
        // ModalBtn을 클릭하면 onClick이벤트의 이벤트핸들러인 openModalHandler함수가 실행되어 isOpen 상태를 변경.
        //즉, ModalBtn 클릭 시, isOpen이 false였으면 true로, isOpen이 true였으면 false로 변경. 

          {isOpen === true ? 'Opened!' : 'Open Modal'}
       // 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때는 ModalBtn의 내부 텍스트가 'Opened!' 로 Modal이 닫힌 상태(isOpen이 false인 상태)일 때는 ModalBtn 의 내부 텍스트가 'Open Modal'이 되도록 구현해야 합니다.
       // JSX문법에서는 조건문을 if문으로 쓸 수 없고, {}안에 '삼항연산자'로 사용해야 한다. 
        </ModalBtn>

        {isOpen === true ? <ModalBackdrop onClick={openModalHandler}>
          <ModalView onClick={(e) => e.stopPropagation()}/> </ModalBackdrop> : null}
 // 1. 조건부 렌더링을 활용해서 Modal이 열린 상태(isOpen이 true인 상태)일 때만 모달창과 배경이 뜰 수 있게 구현.
 // 2. isOpen이 true라면 : <ModalBackdrop />, <ModalView /> 나온다. isOpen이 false라면 : <ModalBackdrop />, <ModalView />가 null이 된다. 
 // 3. ModalBackdrop(배경)도 이벤트가 등록되어있으므로, 만약 ModalBackdrop이 클릭되면 --> openModalHandler(이벤트리스너) 호출 --> isOpen은 false로 변경 --> ModalBtn은 다시 'Open Modal'로 바뀜 & <ModalBackdrop>과 <ModalView>는 다시 null상태
 //<ModalView >는 <ModalBackdrop>의 자식요소. 이벤트 버블링이 일어난다. 
//이벤트 버블링이란? : 선택한 엘리먼트가 부모 요소를 가지는 경우에 발생한다. 모든 요소들은 body부터 하위 자식 요소들까지 계층 구조를 가지고 있습니다. 예를들어 만약 부모 요소 안에 있는 어떤 엘리먼트를 클릭한다고 생각해봅니다. 이때 해당 엘리먼트를 포함하는 부모 요소를 클릭하지 않을 수 있을까요? 내부에 존재하기 때문에 당연히 어렵다. 실제로는 아래와 같이 dep1, dep2를 지나야 dep3를 클릭할 수 있습니다. 여기서 이벤트 버블링은 해당 클릭 이벤트처럼 이벤트 전파가 자식에서 부모로 이동하는 것을 의미합니다. 즉, 자식 요소에 이벤트가 일어나면 부모 이벤트에도 똑같이 적용되는것. 이 경우 사용 가능한 방법이 바로 stopPropagation()을 사용하는 방법입니다. propagation은 사전적 의미로 번식이란 의미를 가지며 부모로 부터 생산된 어떤 것을 의미하죠~ 즉 stopPropagation() 함수를 사용하면 부모에 의한 이벤트 버블링을 stop하여 간단하게 막을 수 있게 됩니다. 

//var doDep3 = function(event) {
   event.stopPropagation();
   alert('Clicked dep3');
}
//ep3 요소를 클릭하면 이벤트 버블링이 발생하지 않고(부모 요소들의 함수는 실행되지 않고) 오직 doDep3 함수만 실행되게 됩니다.

      </ModalContainer>

    </>
  );
};