# modal
React Modal 만들기
현재 투두앱으로 포트폴리오를 만들고 있는 중이었다. 단순히 리스트를 추가하고, 삭제, 수정만이 하는게 아니라, 노드로 백엔드까지 만들어서 진행하려고 했으나... 생각보다 컴포넌츠는 나누는 작업이 많았고, 회원가입 및 로그인까지 작업을 해야되서 첫 포폴치고는 작업량이
[TIL] 함수형 - Modal
부모 컴포넌트에서 초기 state 값을 boolean 으로 선언한다.해당 버튼 태그에서 handleModal 이라는 이벤트를 사용해서,state 상태값을 setState 으로 상태를 변화시킨다!(발생될 시 이벤트는 false => true 값 즉, !modal)
TIL 58일차
솔로데이 동안 진행할 로그인 페이지 구현을 위해 React에서 modal 만드는 방법을 알면 도움이 될 것 같아서 만들어 보았다. https://stackoverflow.com/questions/54150783/react-hooks-usestate-with-objec
iOS & Swift 공부 - Modal
사용자의 이목을 끌기 위해 사용하는 화면 전환 기법엄밀히 말하면 화면 "전환"은 아니고, 다른 화면을 현재 화면 위로 present 하여 표현하는 방식 (present modally)Modal 로 보이는 화면을 사라지게 하려면 특정 "선택"이 동반되어야 한다. → 메
body scroll lock/unlock
모달 창 띄웠을 때 바닥 페이지 스크롤 안되게 해주세요.프로젝트를 하다 보면 위와 같은 요청을 받게 된다.레이어로 모달 창을 띄운 상태에서 스크롤을 하면 바닥 페이지가 위 아래로 움직이게 되는데이걸 막아 달라는거다.CSS 프레임워크나 모달 플러그인 등을 사용하면자체적인
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