Age of Discovery

간단하지만 강력하다. useModalOverlay라는 jsx파일을 만들어 준다. import { useCallback, useState } from 'react'; export default function useModalOverlay() { const [isOpen, setOpen] = useState(false); return { isOpen, open: useCallback(() => { setOpen(true); }, []), close: useCallback(() => { setOpen(false); }, []), toggle: useCallback(() => { setOpen((e) => !e); }, []), }; } 위와 같이 useCallback과 useState를 import해온 다음 ..

글 쓰고 기록하는 습관이 점점 사라지고 있는 것 같아 무섭지만 틈틈이 조금씩이라도 써보려고 한다. 저번 주차 클론 코딩 때는 모달 창 띄우는 게 처음이고 도저히 구글링 해서 새로 공부할 시간이 없어서 모달 창 관리를 개떡같이 했는데 프로젝트 규모가 커졌기 때문에 기능 구현에 급급한 코드는 지양해야 할 것 같다. 리액트 portal을 사용하면 모달 라이브러리를 설치하지 않고도 간편하게 모달을 띄울 수 있다! public / index.html 파일에서 id가 root인 div아래에 같은 경로로 id가 modal인 div를 만들어주면 root(전역) 안에서 어떤 컴포넌트가 어떻게 렌더링 되던지 전혀 영향을 받지 않는 modal을 만들 수 있다. ModalContainer.jsx파일을 하나 만들어주자 impo..