react-modal React로 Modal 만들기 이번에는 도서관을 사용한다고 말하는 것에 침착했다. 1.hooks & Portal 사용 포털이란? 포털은 부모 구성 요소의 DOM 계층 구조 외부의 DOM 노드에 대한 하위 구성 요소를 렌더링하는 공식 메커니즘을 제공합니다. (인용: ) 구현 방법 index.html에 model용 DOM 설치 index.htmlid="modal" 아래에 렌더링 할 구성 요소 만들기 ModalPortal.js... react-modalReactreact-hooks TIL 89 | dimmed 영역 스크롤 막기 햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다. 아래의 코드는 간단하게 스크롤 이벤트를 막을 수 있지만 현재의 위치를 기억하지 못하고 Y의 위치가 0으로 이동해버린다는 단... Reactprevent scrollJavaScriptscroll eventreact-modal스크롤 막기JavaScript
React로 Modal 만들기 이번에는 도서관을 사용한다고 말하는 것에 침착했다. 1.hooks & Portal 사용 포털이란? 포털은 부모 구성 요소의 DOM 계층 구조 외부의 DOM 노드에 대한 하위 구성 요소를 렌더링하는 공식 메커니즘을 제공합니다. (인용: ) 구현 방법 index.html에 model용 DOM 설치 index.htmlid="modal" 아래에 렌더링 할 구성 요소 만들기 ModalPortal.js... react-modalReactreact-hooks TIL 89 | dimmed 영역 스크롤 막기 햄버거 버튼을 눌렀을때 사이드에서 네비게이션 모달이 나오는 페이지의 형태는 쉽게 찾아볼 수 있다. 이때 사용성을 위해서 모달창은 스크롤이 가능하지만(화면보다 네비게이션의 높이가 긴 경우), 그 외에 dimmed 영역은 스크롤이나 터치 이벤트가 불가능하게 하는 것이 좋다. 아래의 코드는 간단하게 스크롤 이벤트를 막을 수 있지만 현재의 위치를 기억하지 못하고 Y의 위치가 0으로 이동해버린다는 단... Reactprevent scrollJavaScriptscroll eventreact-modal스크롤 막기JavaScript