# createPortal

9개의 포스트

[Next.JS] createPortal, Next.js에서 구현하기

Next.js를 공부하고 있습니다. 잘못된 내용이 있다면 아래 댓글을 통해 알려주세요.createPortal API를 사용하면 부모 컴포넌트가 속한 DOM 외부의 또 다른 DOM에 리액트 컴포넌트를 렌더링 할 수 있다.createPortal은 react-dom 패키지에

2023년 3월 10일
·
0개의 댓글
·
post-thumbnail

[Next.js] react-hydration-error

doWork를 Next.js로 마이그레이션 중, snack bar 컴포넌트를 createPortal를 써서 구현하려고 했다. 그러던 중 만난 아래와 같이 document is not defined... '왜 오류가 났을까?'하며 원래 코드부터 분석하기로 했다.내가 작성

2022년 12월 16일
·
0개의 댓글
·

2022년 10월 11일 TIL

createPortal, _document, reflow, window.clientX, window.clientY, window.scrollX, window.scrollY

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

커스텀 모달 관련 기록( 1️⃣ body scroll 2️⃣ reflow 3️⃣ createPortal)

커스텀 모달을 만들면서 겪었던 이슈들과 해결 사항들에 관한 기록

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

모달 만들기 (feat createPortal)

ReactDom의 Portal은 부모 컴포넌트가 속해있는 DOM 바깥의 다른 DOM 노드로 렌더링을 가능하게 해준다. Modal을 만들기 위해 Modal의 z-index를 아무리 높이더라도 부모의 z-index가 낮다면 Modal을 만들 때 의도했던 대로 렌더링이 안

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

React - Portals 로 모달만들기

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

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

React Advanced

필요할 때만 Render 한다.ReconciliationRender 전후의 일치 여부를 판단하는 규칙서로 다른 타입의 두 Element 는 서로 다른 트리를 만들어낸다.개발자가 key prop 을 통해, 여러 Rendering 사이에서 어떤 자식 Element 가 변경

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

React Portal

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

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

React에서 Modal 구현하기(feat. createPortal, 스크롤 막기)

Modal(이하 모달)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법 중에 하나다. 이번 프로젝트에서는 사용자가 어떤 행동을 하였을 때 이 행동을 정말로 진행할 것인지 확인 하는 용도로 사용을 하기도 하였고, 로그인이 필요한 기능을 수행하려 할 때...

2021년 8월 29일
·
0개의 댓글
·