모달 창 컴포넌트 관리

헤더에 있는 로그인 버튼 누르면 모달 창 띄웠다가 (모달 컴포넌트로 들어옴), 모달 창 안에 엑스 버튼 누르면 없애고 싶었음. (자식 컴포넌트가 부모 컴포넌트 state 바뀌게 해야함) 이 경우에 행동은 자식 컴포넌트에서 하는데 기능은 부모에게 영향을 끼치려면 부모 컴포넌트에 closemodal 함수 자체를 props로 내려주면 됨 !

⬇︎ (부모 컴포넌트)

const [showModal, setShowModal] = useState(false);

const openModal = () => {
	setShowModal(true)
}

const closeModal = () => {
	setShowModal(false);
  }
.
.
.
 {showModal ? <Login showModal={showModal}
 closeModal={closeModal}/> : null}

⬇︎ (자식컴포넌트)

<div onClick={props.closeModal}>X</div>