# 모달

6개의 포스트
post-thumbnail

React | 세상 간단하게 모달창 만들기 (라이브러리 X)

위의 모달창을 보자. 위의 모달창에는 X 버튼이 달려있지 않다. 하지만 모달창의 바깥 부분을 클릭하면 바로 모달창이 꺼진다. 이런 간단한 모달창을 세상 쉽게 만드는 방법을 적어 본다. (리액트 초심자가 리액트 초심자에게 드리는 팁입니다!😇)Event.stopPropa

4일 전
·
1개의 댓글
post-thumbnail

[React] Modal 구현하기

리액트에서 기본적인 Modal 을 구현해봤다. 전체적인 코드는 아래와 같다. 함수형 컴포넌트와 스타일드 컴포넌트를 사용해서 구현했다.SignatureHeadCover 라는 부모 컴포넌트에 Modal 컴포넌트를 사용해주었다. 모달 기능 로직 \- modalState 초

2020년 8월 8일
·
0개의 댓글
post-thumbnail

youtube api로 리액트에 영상 가져오기

youtube api 받아서 리액트에 영상 띄워보자!

2020년 6월 13일
·
0개의 댓글

모달 팝업뜰때 바닥 스크롤 막기

모달 팝업이 표시될 때 브라우저 스크롤을 막는 방법 >브라우저 스크롤이 있는데 모달팝업의 내부 스크롤도 있는 경우, 모달팝업의 내부 스크롤을 마우스로 내리다가 끝에 다다르면, 브라우저 스크롤이 내려간다. (어둡게 처리된 내용이 스크롤되는 현상) 이런 현상을 막기위해 모달팝업이 표시될 때는 body의 overflow를 hidden으로 변경해서 브라우저 스...

2019년 6월 13일
·
0개의 댓글
post-thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.

2018년 11월 2일
·
7개의 댓글