# modal

gavri

리액트 모달 관리 방법에 대해 정리한 글입니다.직관적임한 컴포넌트 내에서 로직을 넣어 줄 수 있기에 모달과 컴포넌트간의 데이터 통신이 원활함직관적인 반면 그만큼 코드 재사용이 어려움 (Modal 여러개 일 경우)모달 하나를 생성하는데 하나의 상태, 작성해야되는 코드들이

seungchan__y

코드의 가독성을 높이기 위해 컴포넌트와 결합된 모달을 분리 시켜보자.

enesdyaz

오픈/클로징 useState 만들기버튼 만들기Modal popup창 만들기전체 코드ModalBasic.jsx (참고용)Transition.jsx

codns1223

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

phrygia

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

pastelblue0721

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

yessssssssssol

3명의 프론트, 2명의 백엔드 분들과 프로젝트를 진행

yj05037

프로젝트 중에 결제버튼을 누르면 훼손관련 주의사항릐 모달이 뜨게 하고싶었다.그런데 보니 확인, 취소가 함께 있었고, infoModal 등은 상황에 맞지 않는다고해야하나... 디자인부분이 맞지 않아 방법이 없는지 확인해보았다.그러다가이 답변을 보았다.ant-design에

zoo33

TODO/프론트만들기/프론트와 연결/모달

imnotpizza

React Portal은 부모 컴포넌트의 DOM 계층 구조 밖에 컴포넌트를 렌더링할수 있게 해주는 역할을 한다.사용법은 다음과 같이 매우 간결하다. 일반적으로 Modal창은 한 프로젝트에서 여러개를 사용하므로, 모듈화시키는 것이 좋다.필자는 다음고 같이 구현하였다.우선

space_dog

툴팁이란? 페이지나 어떤 어플리케이션을 만들다보면 툴팁이라는 것을 들어도 보고 만들어봤을 수도 있다. 툴팁은 사용자의 동선을 방해하지 않으면서 익숙하지 않은 기능을 이해할 수 있게 하는 역할을 하는데 이미지나 gif 또 간단한 텍스트를 포함하고 있는 경우가 대부분이다

momonak

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

mangojang

✏️ 실무 초기에 ‘팝업’이라는 단어만 알았지 팝업 종류에 대해 잘 알지 못하여 디자이너의 요청 사항에 당황했던 적이 있었다. 더 이상 그날의 실수를 하지 않기 위하여, 팝업의 종류와 쓰임에 대해 정리해 보았다.

rondido

여기서 아이콘을 찾아 볼 수 있다. https://ant.design/components/iconCameraOutlined.jsxdefaultkey는 처음 렌더링 됬을때 nav1,nav2,nav3 중에 어떤 것을 default로 보여줄 것인지에 대해 결정하는

tnqls1211v

☄️ Portal를 사용하여 TypeScript로 모달창을 구현해봅니다 🙌

std1011

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법을 제공합니다.ReactDOM.createPortal(child, container)첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어

superrookie

클론코딩 프로젝트에 대한 회고

gukbbap

지도...꾸역꾸역 도움 받아서 보여지게 했는데..TA왈"형 검색조건이 너무 단순한데요? 주소 말고 상호로도 검색해서 나오게 해 주세요"나"......해볼게?"modal에 지도 띄우는것도 난감한데인터넷에서 겨우겨우 퍼와서 맵 띄우고검색어 입력해서 검색 되게 했는데검색조건

jknine929

메뉴 버튼 클릭시 하단에 작은 메뉴 목록이 나오는 모달창 구현모달창 외부 클릭시 모달창이 닫히도록 구현useRef모달창을 on/off 하는 토글 버튼이 모달창을 없애는 외부 영역에 위치하다보니버튼 클릭시 모달창이 꺼지지 않고 다시 창이 뜨는 에러 현상 발생useRef를

yrats

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