모달
-
[React] 모달 바깥 부분 클릭시 모달 꺼지게 하기React 2022. 4. 12. 23:29
저는 다양한 프로젝트를 하며 모달 기능을 구현해보았는데요. 모달 기능을 구현하면서 모달 바깥쪽을 클릭 시 모달이 꺼지게 하는 기능을 구현해야 하는 상황이 생길 때가 많았습니다. 처음에 이 기능을 구현할 때 어려움을 겪었던 것이 생각나 한 번 글로써 다시 정리해보려 합니다! 이번화는 다음 스택을 사용하였습니다. - Next.js - Typescript - Styled-Component - Recoil 아래의 코드들은 저의 한 프로젝트에서 복사해온 코드입니다. 일단 Recoil을 사용하여 전역 변수를 선언을 해주었습니다. export const isOpen = atom({ key: "isOpen", default: false, }); export const isWriteModalOpen = atom({ ke..