# Portal

16개의 포스트

Portal

React Portal

2022년 5월 22일
·
0개의 댓글
post-thumbnail

[TIL] react PORTAL!

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

2022년 5월 5일
·
0개의 댓글
post-thumbnail

[React] portal을 이용한 Modal구현

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

2022년 4월 26일
·
0개의 댓글

[React] Portal을 활용해 Modal 창 만들기

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

2022년 2월 3일
·
0개의 댓글

React Portal

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

2022년 1월 15일
·
0개의 댓글
post-thumbnail

React Portal

React Portal을 사용하여 컴포넌트를 다른 돔 엘리먼트에 렌더링하는 방법

2021년 12월 7일
·
0개의 댓글

2021.10.26

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

2021년 10월 26일
·
0개의 댓글
post-thumbnail

TIL 019_React Portal

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

2021년 5월 13일
·
1개의 댓글
post-thumbnail

TIL_67_Portal

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

2021년 4월 16일
·
0개의 댓글
post-thumbnail

new TIL. React Portals & Modal

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

2021년 4월 16일
·
0개의 댓글
post-thumbnail

TIL_65_React Portal

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

2021년 4월 16일
·
0개의 댓글
post-thumbnail

ReactDOM.createPortal

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

2021년 3월 2일
·
0개의 댓글
post-thumbnail

[React] Memoization, Portal

리액트 최적화 필수 개념! Memoization

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

Portal 이용해서 react에서 Redux없이 Modal창 만들기 도전

- react 공식문서에 있는 Portals를 이용해 modal창을 만들어 본 도전기이다.

2020년 5월 3일
·
7개의 댓글