모달2 [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15. [React] 모달창(Modal) 초간단 구현 방법(리덕스, 라이브러리 X) 이 글은 useState, useRef 등만을 활용하여 수동으로 모달창을 구현하는 방법입니다. 이 것만으로도 이미 충분히 간단하지만, 만약 HTML의 dialog 엘리먼트로 훨씬 더 쉽게 구현하는 방법이 필요하시다면, 아래 글을 참고해주세요. [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 모달창 구현 방법 - redux나 별도 라이브러리 없이 아주 쉽게 모달창을 구현하는 방법 1. state 로 Modal 노출 여부를 관리한다. - useState 훅으로 모달창 노출 여부를 관리해준다. 2. Modal 창이 최상위에 노출되도록 CSS를 조정한다. - position: absolute로 위치를 조정한다. - z-index를 높게 줘서 최상위에 노.. 2022. 8. 16. 이전 1 다음
