# modal
React | 세상 간단하게 모달창 만들기 (라이브러리 X)
위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa
TIL 31일차 - modal 만들기
평화로운 수요일나와 지상이는 solo week 계획대로 첫 날에는 modal을 만들어 보았다.모달은 터럭 모(毛) + 달달하다와 합쳐진 말로 풍성한 털이 있어서 달달하다. 라는 말이다. 친구로는 팝업이 있다.팝업은 기존 브라우저 페이지에서 새로운 브라우저 페이지를 여는
[Javascript]Closing modal on outside click | 모달창 외부 클릭해서 닫게 하는 방법
포트폴리오 사이트나 기업 웹사이트를 만들 때, 모달(modal)창의 닫기 버튼 말고도 모달창을 제외한 화면을 클릭해서 닫을 수 있도록 해야 사용자가 불편함 없이 사이트를 이용할 수 있다. 간단한 HTML 태그 구성과 자바스크립트 단 몇 줄이면 해결 가능하다.
[React] Modal을 Redux로 구현해보자!
웹페이지를 구현할 때, Modal이라는 개념은 정말 많이 쓰인다. 하지만 단방향으로만 데이터를 바인딩해주는 React 특성상 Modal 만들 때에는 구조적이나 z-index과 같은 뷰쪽에서 깔끔하지않는 문제가 발생한다..🤔 그래서, 혹시 Redux를 이용하여 Mod
[SpaceX Clone] Modal 기능 구현, unMount Animation (React)
Space X Clone 중 Modal 기능 구현 과정 개념 React에서 모달을 구현하는 방법은 크게 2가지로 나뉜다. React Portal 이용 조건부 렌더링 이 중 저는 조건부렌더링을 이용해서 모달창을 부모의 state값에 따라서 render여부를 결정하는 식
[React] Modal 구현하기
리액트에서 기본적인 Modal 을 구현해봤다. 전체적인 코드는 아래와 같다. 함수형 컴포넌트와 스타일드 컴포넌트를 사용해서 구현했다.SignatureHeadCover 라는 부모 컴포넌트에 Modal 컴포넌트를 사용해주었다. 모달 기능 로직 \- modalState 초
[React] modal 로그인창 만들기 ⚑
import React, { Component } from "react";import { Link } from "react-router-dom";import "./SignIn.scss";class SignIn extends Component { state = {
1주차 프로젝트 - 이중 모달창 띄우기
1주차 프로젝트가 시작되었다.나는 29CM 사이트 클론 팀에서 29TV 페이지를 맡게 되었다.29CM는 국내 온라인 편집숍 사이트이며 29TV는 자체 소셜 네트워킹 서비스 페이지로, 입점 브랜드들이 브랜드 제품을 홍보하거나 사진, 비디오를 공유하는 페이지이다.페이지 구
Portal 이용해서 react에서 Redux없이 Modal창 만들기 도전
- react 공식문서에 있는 Portals를 이용해 modal창을 만들어 본 도전기이다.
Modality
Modality는 사용자의 이전 컨텍스트와는 별개로 컨텐츠를 임시적인 모드로 표시하는 디자인 테크닉이다. 종료하려면 명시적인 조치가 필요하다. 사람들이 독립적인 작업 또는 밀접하게 관련된 옵션에 집중하도록 돕는다.사람들이 중요한 정보를 수신하고 필요한 경우 조치를 취하
Modal 만들기 : Event propagation
프로그래머스 2020 Dev-Matching : 웹 프론트엔드 과제 복기 https://github.com/woohyeonjo/ilovecat
React Modal Component 만들기
UI 코딩 src/components/Modal/index.js ` src/components/Modal/Modal.js ` src/components/Modal/Modal.scss ` src/App.js ` UI완성 localhost3000.png Modal Open/Close 기능 구현 src/App.js ` src/components/M...