// App.js
const [modalOpen, setModalOpen] = useState(false); // 초기상태와 
                                                   // setter 함수 설정

const modalClose = () => {
  setModalOpen(!modalOpen); // 모달의 현재 상태와 반대되는 상태 부여
};

return(
    <div>
      <button onClick={modalClose}>예제</button>
      {modalOpen && <모달컴포넌트 modalClose={modalClose}></모달컴포넌트>}
    </div>
    // &&은 조건부 렌더링이다. 초기 상태가 false였는데 onClicke을 함으로써 true 가 되었고 && 앞에가 true일 경우 && 뒤에 식이 실행된다
)

//모달컴포넌트.js
const 모달컴포넌트 = ({modalClose}) => { //App.js에서 modalClose 함수를 가져온다.
    const onModalClose = (e) => {
        if(e.target === e.currentTarget){
            modalClose(); // modalClose 함수 실행
        }
        // e.target => 실제 이벤트가 발생한 요소 (배경)
        // e.currentTarget => 이벤트 리스너가 달린 요소 (배경)
    }
    return(
        <컴포넌트이름 onClick={onModalClose}>
        ...
        </컴포넌트이름>
    )
}