# modal

thovy

모달을 만드는 와중에 에러가 났다 상황 ❗ 자식컴포넌트에서 버튼을 클릭하면, 부모컴포넌트에 있는 함수가 실행되게 하고 싶다. 이렇게 props 이름 다 맞춰도 함수가 두 번씩 is not function 에러를 내뿜을 때 SOLUTION ✅ 부모 컴포넌트에서 화

_woogie

모달을 띄울 때 보통 body의 스크롤을 막습니다. 이 때 모달 내부의 경우에는 스크롤이 되어야 하는 경우도 있습니다. 대부분 잘 작동하지만 IOS에서 스크롤이 되지 않는데요, body-scroll-lock 라이브러리로 처리해봤습니다.

_woogie

Next.js에서 라우팅을 감지하는 법 혹은 react에서 라우팅을 감지하는 법!

sarang_daddy

아마존 웹사이트를 클론 하면서 학습한 CSS 내용을 정리해보자. (모달, 딤처리)

horang-e

React 의 sweet alert 같은 형태의 modal을 만들어 라이브러리화 했습니다!

sgsg9447

체크 버튼을 클릭시, 모달이 나온다.먼저 모달컴포넌트는 type Variant = "code" | "certification"에 따라 2가지 다른 모달을 보여준다.현재 하고 있는 형태는 인증과 관련된 certification Modal 부분을 구현할 것이다.newDon

bami

모달(Modal)이란, 사용자의 이목을 집중시키기 위한 그래픽 인터페이스 창입니다.좀 더 자세히 이야기하자면 하나의 페이지에서 하나의 작은 다른 페이지를 띄워 이 페이지에 대한 조작이 종료되기 전까지 부모 페이지로 돌아가지 못하도록 만든 창입니다. 그래서 모달 창을 이

imxorud

자바스크립트로 모달(Modal) 구현하기

wlsgkq123

프로젝트 진행중 모달을 사용하는게 많아서 개발 겸 기록Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.보통 모달을 호출하는 컴포넌트안에서 모달을 작성하는데 이때 자식 엘리먼트로 렌더링 하지 않고 외부

cloud_oort

모달 버튼 클릭하면 모달창이 화면에 뜬다.모달창은 정중앙에 위치하며 모달을 제외한 뒷배경은 어둡게 한다.뒤로가기 또는 뒷배경 클릭하면 모달창을 나갈 수 있게 한다.

938938

기존 페이지 위에 새로운 윈도우 창이 아닌 레이어를 까는 것팝업현재 페이지에 또 다른 페이지를 띄우는 것.외부설정으로 제어할 수 있음(강제로 창을 막는 등)모달새로운/다른 페이지가 아니라 레이어를 보여주는 것.페이지를 이동하면 사라짐.외부설정의 옵션에 영향을 받지 않음

ouneno

📍 1. 기본 구성 소개 👀 1. App.js 👀 2. App.css 📍 2. Modal 생성 👀 1. function Modal() 생성 및 호출 👀 2. 타 함수 호출하는 방법 📍 3. 삼항연산자로 조건걸기 👀 1. 삼항연산자 👀 2. 클릭시 모달생

chaentopia

iOS 1주차 과제 화면 전환에 대한 부분을 구현 중, 업로드중.. > navigation을 이용해서 1번에서 2번으로 전환, modal을 이용해서 1번 화면에서 3번 화면으로 / 2번에서 3번 화면으로 화면 전환 후 3번 화면에서는 dismiss를 통해서 1번 화

horang-e

react -native-swal

doogie97

fullScreen일 경우 모달을 불러오는 뷰(모달 아래에 있는 뷰)의 뷰 라이프 사이클이 돌아간다overFullScreen일 경우 모달을 불러오는 뷰(모달 아래에 있는 뷰)의 뷰 라이프 사이클이 돌아가지 않는다.fullScreen의 경우는 화면을 갈아끼우는 느낌이고

duroomi

고민 사항 아래와 같이 댓글을 쓰는 페이지가 있다. 아래와 같은 기본적으로 제공하는 alert를 쓰기 싫어서 컴포넌트로 Alert Modal을 만들기로 했다. 새로 만든 Alert Modal을 보면 이렇게 생겼다. 여기서 Alert에 표시되는 텍스트를 여러 경우

duroomi

아래 링크에서 설명이 잘 되어있다.https://mygumi.tistory.com/406지금까지는 alert, confirm 모달을 따로 만들고 모달을 사용할 컴포넌트로부터 import한 후 사용했다. 그러다보니 state관리가 너무 힘들어졌고 props를 내

gavri

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

seungchan__y

가독성과 확장성이 높은 코드를 위해 컴포넌트와 강하게 결합된 모달을 분리 시켜보자.

enesdyaz

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