# modal
React - Modal 관리
리액트 모달 관리 방법에 대해 정리한 글입니다.직관적임한 컴포넌트 내에서 로직을 넣어 줄 수 있기에 모달과 컴포넌트간의 데이터 통신이 원활함직관적인 반면 그만큼 코드 재사용이 어려움 (Modal 여러개 일 경우)모달 하나를 생성하는데 하나의 상태, 작성해야되는 코드들이
삭제시 모달창 팝업 나오게 하기 (tailwindcss) - web
오픈/클로징 useState 만들기버튼 만들기Modal popup창 만들기전체 코드ModalBasic.jsx (참고용)Transition.jsx

[React] React Portal이란, React Portal로 modal 구현
왜 새로운 게 끝도 없이 나오는거지...? React Portal은 진짜 생전 첨 들어보는데 인강 듣다가 알게돼서 기록해두기 위해 끄적여본다...공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법

[react] 모달 팝업창 만들기 (react modal)
프로젝트를 진행할 때마다 모달창을 마주치는 일이 많다. 프론트엔드 프레임워크나 라이브러리를 사용하면 편리성이나 시간을 아낄 수 있기때문에 npm에 등록된 모듈을 사용하곤 했지만, 만들어진 모듈이 아닌 직접 만들어 재사용해 보기로 했다.

useRef 사용하기 (Modal UI, 이벤트버블링)
Modal UI를 만들어보면서 uesRef와 이벤트 버블링을 알아봅시다. 모든 코드는 직접 작성했으며, github에서 확인하실 수 있습니다.

모달창 적용시 확인 취소, 두가지 버튼이 필요 없을 시
프로젝트 중에 결제버튼을 누르면 훼손관련 주의사항릐 모달이 뜨게 하고싶었다.그런데 보니 확인, 취소가 함께 있었고, infoModal 등은 상황에 맞지 않는다고해야하나... 디자인부분이 맞지 않아 방법이 없는지 확인해보았다.그러다가이 답변을 보았다.ant-design에
React 컴포넌트로 Modal 창 구현하기(with hooks)
React Portal은 부모 컴포넌트의 DOM 계층 구조 밖에 컴포넌트를 렌더링할수 있게 해주는 역할을 한다.사용법은 다음과 같이 매우 간결하다. 일반적으로 Modal창은 한 프로젝트에서 여러개를 사용하므로, 모듈화시키는 것이 좋다.필자는 다음고 같이 구현하였다.우선
똑똑하게 툴팁, 모달 만들기 (with. React.cloneElement)
툴팁이란? 페이지나 어떤 어플리케이션을 만들다보면 툴팁이라는 것을 들어도 보고 만들어봤을 수도 있다. 툴팁은 사용자의 동선을 방해하지 않으면서 익숙하지 않은 기능을 이해할 수 있게 하는 역할을 하는데 이미지나 gif 또 간단한 텍스트를 포함하고 있는 경우가 대부분이다

[React] 공통 팝업 (모달) 만들기
프로젝트 진행 중, 로그인 후에 에러 메세지를 보여줄 모달창이 필요해졌다.다른 프로젝트에서도 최대한 재사용이 가능하도록 만들어 보기로 했다.우선 관련된 모든 파일은 한 폴더 내에서 작업하기로 함

팝업 종류와 쓰임
✏️ 실무 초기에 ‘팝업’이라는 단어만 알았지 팝업 종류에 대해 잘 알지 못하여 디자이너의 요청 사항에 당황했던 적이 있었다. 더 이상 그날의 실수를 하지 않기 위하여, 팝업의 종류와 쓰임에 대해 정리해 보았다.
[React]AntDesign 알아보기
여기서 아이콘을 찾아 볼 수 있다. https://ant.design/components/iconCameraOutlined.jsxdefaultkey는 처음 렌더링 됬을때 nav1,nav2,nav3 중에 어떤 것을 default로 보여줄 것인지에 대해 결정하는

[TS] React Portals 이용하여 modal 구현해보기 👷♀️
☄️ Portal를 사용하여 TypeScript로 모달창을 구현해봅니다 🙌
Portals
Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어
TA야... 나 좀 살려주라..
지도...꾸역꾸역 도움 받아서 보여지게 했는데..TA왈"형 검색조건이 너무 단순한데요? 주소 말고 상호로도 검색해서 나오게 해 주세요"나"......해볼게?"modal에 지도 띄우는것도 난감한데인터넷에서 겨우겨우 퍼와서 맵 띄우고검색어 입력해서 검색 되게 했는데검색조건
[pre-project] stack overflow clone 팝업 모달창 외부 영역 클릭 관련 이슈
메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 모달창 구현모달창 외부 클릭시 모달창이 닫히도록 구현useRef모달창을 on/off 하는 토글 버튼이 모달창을 없애는 외부 영역에 위치하다보니버튼 클릭시 모달창이 꺼지지 않고 다시 창이 뜨는 에러 현상 발생useRef를

병원 예약 시스템 구축
병원에 가려고 예약을 하려고 합니다.예약이 가능한 일자를 선택하여, 예약을 진행하려고 합니다. 노쇼 방지를 위한 설계를 합니다.styled-componentsreact-domreact-router-domprettiermodala tagmedia quarylocalSto