# modal

132개의 포스트

React - Modal 관리

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

3일 전
·
0개의 댓글
·
post-thumbnail

클린한 모달 사용하기 - 모달과 컴포넌트의 분리

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

3일 전
·
0개의 댓글
·

삭제시 모달창 팝업 나오게 하기 (tailwindcss) - web

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

3일 전
·
0개의 댓글
·
post-thumbnail

[React] React Portal이란, React Portal로 modal 구현

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

2023년 1월 19일
·
0개의 댓글
·
post-thumbnail

[react] 모달 팝업창 만들기 (react modal)

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

2023년 1월 18일
·
0개의 댓글
·
post-thumbnail

useRef 사용하기 (Modal UI, 이벤트버블링)

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

2023년 1월 16일
·
0개의 댓글
·
post-thumbnail

[project] React로 라이브러리 사용하지 않고 프로젝트 만들기 - 시작

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

2023년 1월 6일
·
0개의 댓글
·
post-thumbnail

모달창 적용시 확인 취소, 두가지 버튼이 필요 없을 시

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

2023년 1월 2일
·
0개의 댓글
·
post-thumbnail

내배캠 49일차

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

2023년 1월 1일
·
0개의 댓글
·

React 컴포넌트로 Modal 창 구현하기(with hooks)

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

2022년 12월 24일
·
0개의 댓글
·

똑똑하게 툴팁, 모달 만들기 (with. React.cloneElement)

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

2022년 12월 9일
·
0개의 댓글
·
post-thumbnail

[React] 공통 팝업 (모달) 만들기

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

2022년 12월 7일
·
0개의 댓글
·
post-thumbnail

팝업 종류와 쓰임

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

2022년 12월 2일
·
0개의 댓글
·
post-thumbnail

[React]AntDesign 알아보기

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

2022년 11월 29일
·
0개의 댓글
·
post-thumbnail

[TS] React Portals 이용하여 modal 구현해보기 👷‍♀️

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

2022년 11월 26일
·
0개의 댓글
·

Portals

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

2022년 11월 16일
·
0개의 댓글
·

TA야... 나 좀 살려주라..

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

2022년 11월 4일
·
0개의 댓글
·

[pre-project] stack overflow clone 팝업 모달창 외부 영역 클릭 관련 이슈

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

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

병원 예약 시스템 구축

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

2022년 10월 19일
·
0개의 댓글
·