Chunho’s DevLife

모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다. const [animationOn, setAnimationOn] = useState(false) 이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. setAnimationOn(true) setTimeout(() => { setAnimationOn(false) setModalOpen(false) }, 500) animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ $..

const [modalOpen, setModalOpen] = useState(false) const el = useRef() useEffect(() => { window.addEventListener('click', handleCloseModal) return () => { window.removeEventListener('click', handleCloseModal) } }, [modalOpen]) const handleCloseModal = (e: MouseEvent) => { if (modalOpen && e.target !== el.current) { setModalOpen(false) } } //모달 모달 영역의 엘리먼트를 지정해주기 위해서는 useRef를 사용한다. useRef를 사용해 모달 ..

모달창을 생성하기 위해 먼저 modals 폴더에 Modal jsx 파일을 생성해준다. import React, { Component } from 'react' class Modal extends Component { constructor(props) { super(props) } render() { const { open, close } = this.props return ( {open ? ( 모달창입니다. ) : ( )} ) } } export default Modal 위와 같이 props로 모달창을 제어하기 위한 toggle인 open과 open을 false로 바꿔 모달창을 사라지게 할 close 함수를 받아온다. open이 참일 경우에만 모달창이 나타난다. this.state = { modalOpe..