modal2 [React] HTML <dialog> 태그로 Modal 구현하기 유튜브에서 우연히 HTML dialog 태그 관련 영상을 보고 이번 프로젝트에 너무 적용해 보고 싶었다! 많은 시행착오가 있었지만 결국 dialog 태그를 이용해서 모달을 구현하는 데 성공했다. 구현 과정에서 React에 dialog 태그를 적용하는 자료를 많이 찾을 수 없었기 때문에 코드를 기록으로 남기려 한다. HTML dialog 태그를 사용했을 때의 장점 backdrop을 포함한 기본적인 모달의 UI가 제공된다. (CSS 커스텀도 가능) dialog에서 제공되는 showModal(), close() 등의 API를 이용하여 모달을 쉽게 구현할 수 있다. esc 버튼을 클릭하여 모달을 닫을 수 있다. 기본적인 모달 UI 제공 (CSS 수정 방법) backdrop과 함께 정가운데 모달이 생성된다. 만약.. 2023. 5. 28. [TIL] 내일배움캠프 React 과정 2023.01.10 Today I Learned React Native 팀 프로젝트 진행 댓글 수정, 삭제 시 View->Modal로 수정 원래는 컴포넌트를 이용해서 버튼을 클릭했을 때 댓글 수정, 댓글 삭제 기능이 보이도록 구현했는데 크기가 너무 작아서 수정 삭제 버튼을 클릭하기가 힘들고 컴포넌트도 한번 이용해보고 싶어서 수정하기로 했다. setIsOpenModal(false)}> setIsOpenModal(false)}> 댓글 수정 deleteMutate.mutate(comment.id,{onSuccess: () => queryClient.invalidateQueries("communityComments")})}> 댓글 삭제 최상위 모달 안에 배경을 블러 처리하기 위해서 TouchableOpacity로 만든 BackBl.. 2023. 1. 12. 이전 1 다음
