HTMLDialog1 [React] 모달창(Modal) 쉽고 간단한 구현 방법 (HTML dialog 엘리먼트 사용) # 리액트 - 모달창 초간단 구현 방법 HTML 에서 기본 제공하는 dialog 엘리먼트를 이용하면, 아래의 2가지를 아주 쉽게 구현할 수 있다. 1. 모달창 2. 다이얼로그 모달창과 다이얼로그의 차이는 - 모달창: dialog 엘리먼트 외부 영역이 불투명하게 dim 처리되고, 스크롤을 제외한 인터랙션(클릭 등)이 허용되지 않는다. - 다이얼로그: 툴팁처럼 노출되며 인터랙션에 영향을 미치지 않는다. dialog 엘리먼트를 이용하면, React에서 useState 나 외부 상태 관리 라이브러리 등을 사용하지 않아도 아주 쉽게 모달창을 구현할 수 있다. 당연히 Next.js 13 환경에서도 동일하게 모달창을 구현할 수 있다. 1. 모달창 dialog 엘리먼트는 비노출 상태가 디폴트이며, (open 속성을 t.. 2023. 8. 15. 이전 1 다음
