# Portal

wlsgkq123

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

liswktjs

Next로 snackBar구현하기

wjd5464

모달같은 컴포넌트는 모달 전체가 렌더링 되는 곳에 실제로 렌더링 되어서는 안된다.실제 렌더링 되는 곳위와 같이 렌더링 되어서는 안된다. → 물론 렌더링 되었을때 위와 같이 되어도 사용자 UI에는 모달창이 보이지만 코드 적으로 이는 좋은 코드는 아니다.프로젝트에서 Mod

elinapark

ReactDOM.createPortal(child, container) 구현방법

tnqls1211v

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

moolbum

React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다.child (첫번째인자) : ReactChildrencontainer (두번째인자) : DOM 엘리먼트react프로젝트의 h

pcg0527

리액트로 프로젝트를 하면서 모달 컴포넌트를 만들 때 생각지 못한 부분에서 오류가 났습니다.아래 코드는 모달 컴포넌트를 portal을 통해 root가 아닌 다른 요소에 렌더링하고 있습니다.다만, 다음과 같이 오류가 발생합니다. getElementById의 반환 값은 HT

pcg0527

공식 문서에 따르면이라고 하는데... 설명이 무척 어렵게 느껴진다. :sweat:예시를 통해 무엇을 의미하는지 알아보자다음과 같이 간단히 모달 컴포넌트를 만들어 보았다.App.js에서 모달이 열려있는지(modalOpen) 상태관리를 하며 렌더링 해준다.이처럼 모달 컴포

dlsdk0601

기초 정리 6편으로 돌아왔습니다.기초 정리가 얼마나 길어질지는 모르겠지만, 제 힘이 닿는한 계속 작성 해보려 합니다. 나중에는 제가 이 정리편을 보고 복습할 수 있다는 마음으로 최대한 자세히, 그리고 간단한 코드 예제로 정리 해볼겁니다.오늘은 ref와 portal에 대

imconfi11

React Portal

leedocs

놀라운건 넘쳐난다.모달을 구현하기 위해 강사님께 추천받은 React Portal을 알아보자.https://ko.reactjs.org/docs/portals.html공식 문서 읽어주고!portal은 DOM 트리의 어디에나 존재할 수 있고 일반적인 React 자식

hoyyat

리액트 js는 div를 찾아서 마운트한다.아래 새진처럼 index.js의 root id 에서 마운트한다.다음은 index.html 파일 body 부분이다.여기 root에 리액트가 들어온다.그런데 가끔 리액트 루트 밖을 만지고 싶을때가 생기는데 리액트루트 밖에 리액트를

kokoball0

ReactDOM에서 제공하는 Portal은 컴포넌트를 렌더링 할 때, 부모 컴포넌트의 DOM 외부에 존재하는 DOM 노드에 렌더링 할 수 있게 해준다.풀어서 설명하자면Portals는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI를 어디에 랜더링 시킬지 DOM을

dinomoon

사용자가 form에서 잘못된 제출을 했을 때 error modal을 띄워주는 코드를 작성한다고 해보자.

ginameee

slot에는 v-show 사용이 불가능하다.v-show는 해당 DOM을 그려놓고 display를 none으로 처리해준다.내용이 동적으로 변하는 slot에 대해서는 어떤 element를 display: none 처리해야할지 알 수 없기때문에 사용이 불가능하다. v-if로

aliceinkorea

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. 부모 컴포넌트 DOM 계층 구조에

poohv7

Learn React Portal In 12 Minutes By Building A Modal위 영상을 기반으로 작성하였음.기업협업 4일차. 함께 프로젝트를 진행할 개발자 분께서 모달창 관련하여 왜 포탈을 사용하게 됐는지를 이해하는 것이 중요하다고 말씀해주셨다. 준우님

yoojin-kwon

모달 창은 사용자에게 특정 내용을 강조하여 전달하고자 할 때 사용한다. 모달 창에 대한 주목도를 높이기 위해 일반적으로 배경을 어두운 색상으로 두어 대비를 준다. 그런데 위 이미지와 같이 다른 컨텐츠들이 모달 창보다 높은 z-index를 가진다면? 좋은 모달 창이라고

poohv7

PortalsPortals포탈은 부모 컴퍼넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공.첫번째 인자 (child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식.두번째 인자(

jgi0105

modal을 사용하기 위해서는 redux를 연결하거나 contextAPI를 사용해서modal provider를 만들어 주고는 했다. 그런데 보니깐 리액트 돔 api중에 하나인 createPortal을 이용해서 모달을 만들어 사용할 수 있다는 부분을 보고는 나도 한 번