# createPortal

kh8640

들어가며 이번에 회사에서 디자인 시스템 프로젝트를 시작하였다. vite, react, typescript, storybook 을 기반으로 npm으로 배포(업로드 예정) 할 수 있도록 설정을 마친 후 다양한 공통 컴포넌트를 개발하며 디자인 시스템 구축하는 중이다. 컴포넌트 중에서 사용하기 간편하면서도 신경 써야 할 부분이 많은 DropDown 컴포넌트 개발 과정에 대한 기록을 공유하고자 한다. DropDown 체크리스트 DropDown 컴포넌트를 구현하기 위해 필요사항 리스트를 정리해 보았다. 부모의 overflow 속성에 영향을 받지 않으면서, 최상단 고정 배치 body 스크롤 방지 콘텐츠 외부 영역 클릭 시 닫힘 콘텐츠 위치 자동 변경 (콘텐츠의 남은 공간에 따라 위치 변경) 합성 컴포넌트로 구현 마운트/언마운트 시 transition 적용 보다시피 디테일하게 신경 써야 할 부분이 엄청 많다

evelo

createPortal을 사용해서 모달 만들기 index.html에 dom요소들과 같은 위치에 생성하고 해당 모달 요소의 z-index를 통해서 뒤에 배경을 가리고 모달을 보여주는식으로 접근. 1. next.js에서는 index.html이 없기때문에 요소를 감싸고있는 layout 파일에서 생성 2. 모달 portal 생성 createPortal에는 인수를 2개를 필수로 전달해야하는데 (key는 선택 사항) 모달에 보여줄 자식요소와 모달로 사용할 domNode를 전달해야함 위에서 아이디를 지정한 요소를 getElementById로 불러와서 연결해주고 createPortal에 요소로 전달 3. 모달의 자식요소와 모달요소 사이에 모달을 닫는 기능을 해줄 컴포넌트 생성 모달의 내용 밖을 클릭하거나 x표시를 클릭할때 모달이 닫히게 하기위한 컴포넌트 파일 (close는 모달을 보여주는 페이지에서 설명) 해당 컴포넌트는 modalPo

rl0425

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법을 제공합니다. 모달은 특정 HTML 안이 아니라 모든 컴포넌트의 바깥에 있어야 합니다. 따라서 모달 엘리먼트를 바깥으로 빼내야 하는데, 이 때 사용하는게 createPortal 메서드 입니다. 해당 메서드는 react-dom이 필요합니다. 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React 자식입니다. 두 번째 인자(container)는 DOM 엘리먼트입니다. 실제 사용 예시 해당 예시는 루트 div 옆에 modal과 backdrop div 태그를 미리 만들어둬야 합니다. 기존에는 redux로 바깥 컴포넌트를 활성화/비활성화 하는 방법을 통해 모달의 위치를 조정했는데, 해당 방법을 사용해 쉽게 모달을 제어할 수 있었습니다. https://react.d

sumi-0011

Portal는 뭐야? Portal이라고 이름이 정해있는 것은 아니지만, 저는 Portal이라는 이름을 사용하도록 하겠습니다. 지금부터 createPortal를 이용하여 보통의 컴포넌트 DOM 계층에서는 접근 할 수 없는 `` 태그의 자식으로 컴포넌트를 렌더링 할 수 있는 Portal 컴포넌트를 구현하려고 합니다. createPortal React에서는 기본적으로 createPortal이라는 API를 제공합니다. createPortal을 사용하면 일부 자식을 DOM의 다른 부분으로 렌더링 할 수 있습니다. 사용 예시 > 참고 링크 : createPortal Portal 컴포넌트 만들기 리액트 공식 문서를 참고하여 createPortal를 이용해 body에 자식 노드를 렌더링 하는 Portal 컴포넌트를 만들어

isolatorv

AS IS 기존 모달 사용 방식은 Context안에 children을 보내서 createPortal로 띄우는 방식이었다. 그런데 이 방식은 모달이 하나 뜨면 다른 모달이 꺼져버린다는 것이 문제가 되었다. 모달 위에 확인 모달을 띄워야 할 때가 있는데 이 경우에는 dom 구조 바깥에 뜨는 modal의 z-index를 조정한다고 해결이 되지 않아서 변경하기로 마음을 먹었다. TO BE 1. context에서 redux로 전환 이미 사용하고 있는 redux이기도 하고 따로 context를 사용해서 modal만의 state를 관리하는건 불필요하다고 생각했다. 또한 여러 모달을 띄울 수 있게 할 예정이기 때문에 추적과 관리가 용이할 수 있으면 좋을 것 같았다. context는 상태 변경 감지를 위해 다시 렌더링되기 때문에 맘에 안들었다. ![](https://velog.velcdn.com/images/isolatorv/post/b196

pengoose_dev

재사용성이 높은 모달을 간단하게 만들어보자. Portal 생성 포탈을 생성하는 이유는 간단하다. 우선 컴포넌트가 생성된 결과부터 확인하자. root의 하위 컴포넌트에 modal을 제어하는 컴포넌트가 생성되는 것이 아닌, modal-root라는 별개의 컴포넌트에 생성된다. 하나의 컴포넌트에 로직을 작성하게 된다면, 여러 컴포넌트가 복잡하게 얽혀 예상치 못한 z-index issue를 마주할 수 있다. 하지만, 해당 솔루션을 적용하면 오로지 modal-root 내부의 컴포넌트들의 CSS와 root컴포넌트 내부에 z-index가 부여된 컴포넌트들만 고려하면 되기 때문에 예상치 못한 오류를 피할 수 있다. 또한, 기능에 따라 컴포넌트를 분류하였기 때문에 이후 확장성과 재사용성에 이득을 취할 수

2jehoon

Next.js를 공부하고 있습니다. 잘못된 내용이 있다면 아래 댓글을 통해 알려주세요. React.createPortal() createPortal API를 사용하면 부모 컴포넌트가 속한 DOM 외부의 또 다른 DOM에 리액트 컴포넌트를 렌더링 할 수 있다. createPortal은 react-dom 패키지에서 가져올 수 있고, children과 domNode라는 파라미터를 가지며children으로 전달 받은 파라미터를 domNode 안에 공급한다. children에는 JSX(HTML 태그, 리액트 컴포넌트, 문자열, 숫자, 배열 등)을 전달할 수 있다. domNode는 DOM 노드를 전달 받으며 보통 document.getElementById(), document.querySelector()이 리턴하는 값을 많이 사용한다. Next.js에서 포탈 사용 _document.tsx 파일에 컴포넌트를 주입할 `

dee0518

doWork를 Next.js로 마이그레이션 중, snack bar 컴포넌트를 createPortal를 써서 구현하려고 했다. 그러던 중 만난 아래와 같이 ... '왜 오류가 났을까?'하며 원래 코드부터 분석하기로 했다. 🤔 document를 왜 모를까?? 내가 작성한 코드는 아래와 같다. React에서 createPortal을 써봤다 익숙한 모습이다. 두번째 인자로 넘겨준 컨테이너 DOM 노드에서 오류가 나고 있다. 🧷 createPortal 개념이 궁금하다면 여기로!! Next.js는 서버사이드 렌더링으로 컴

sjyoung428

Portal이란 ReactDom의 Portal은 부모 컴포넌트가 속해있는 DOM 바깥의 다른 DOM 노드로 렌더링을 가능하게 해준다. createPortal을 사용하는 이유 Modal을 만들기 위해 Modal의 z-index를 아무리 높이더라도 부모의 z-index가 낮다면 Modal을 만들 때 의도했던 대로 렌더링이 안 될 수도 있다. 이런 현상을 해결하기 위해 앞에서 설명한 Portal은 좋은 해결책이 된다. 모달 만들기 트리 구조 index.html Modal.types.ts Modal.tsx ReactDOM.createPortal은 첫 번째 인자로 렌더링할 ReactNode, 두 번째 인자로 렌더링 될 장소인Element를 받는다. useEffect안의 로직으로 Modal이 열렸을 때 스크롤을 막아 준다. Modal.styles.ts App.tsx

moolbum

Portals > React에서 제공하는 Portal은 UI를 어디에서 렌더링 시킬지 DOM을 사전에 선택하여 부모컴포넌트 바깥에서 렌더링 할 수 있도록 해줍니다. child (첫번째인자) : ReactChildren container (두번째인자) : DOM 엘리먼트 사용방법 1. html id 추가 react프로젝트의 html에서 기본적으로 제공하는 index.html 에서 코드를 추가합니다. react에서는 index.html에 추가하지만 next는 _document에서 추가할 수 있습니다. 2. modal Portals 컴포넌트 생성 두번째 인자에는 DOM오브젝트가 들어가야 하므로 첫번째 단계에서 만들었던 id인 modal을 참조합니다. 3. modal 컴포넌트 생성 자신이 사용하고자 하는 모달 컴포넌트를 만들어줍니다. css 4. 모달 렌

smiletmf

Optimizing Performance 필요할 때만 Render 한다. > Reconciliation > > - Render 전후의 일치 여부를 판단하는 규칙 > - 서로 다른 타입의 두 Element 는 서로 다른 트리를 만들어낸다. > - 개발자가 key prop 을 통해, 여러 Rendering 사이에서 어떤 자식 Element 가 변경되지 않아야 할 지 표시해 줄수 있다. createPortal > Portals > > > 부모 Component 의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 Rendering 하는 최고의 방법을 제공함 > forwardRef

kim98111

React Portal "React Portal"은 컴포넌트를 우리가 원하는 돔 엘리먼트(실제 돔 엘리먼트)에 렌더링하고 싶은 경우에 사용하는 개념입니다. 위 코드처럼 지금까지는 ReactDOM.createRoot().render()을 사용하여 HTML 문서의 ``라는 최상위 돔 엘리먼트 안에 "모든 리액트 컴포넌트를 렌더링"했습니다. 하지만 Modal이나 Dialogue 같은 컴포넌트를 렌더링할 때는 이러한 구조를 벗어나 "또 다른 최상위 돔 엘리먼트에 위치"시키도록 하고 싶은 경우가 존재할 수 있습니다. 즉, root 돔 요소 노드가 아닌 다른 돔 요소 노드에 렌더링하고자할 때 사용합니다. Modal이나 Dialogue와 같은 것들을 `` 최상위 돔 엘리먼트에 렌더링하는 것은 기술적으로 잘못된 부분은 아니지만 이상적이지 않습니다. **HTML 문서는 Se

do_dadu

1. Modal Modal(이하 모달)은 사용자의 이목을 끌기 위해 사용하는 화면전환 기법 중에 하나다. 이번 프로젝트에서는 사용자가 어떤 행동을 하였을 때 이 행동을 정말로 진행할 것인지 확인 하는 용도로 사용을 하기도 하였고, 로그인이 필요한 기능을 수행하려 할 때 로그인 창을 모달로 띄워서 페이지 이동 없이 로그인을 진행하도록 수정하려고한다. 모달은 모달 컴포넌트를 만든 후 필요한 컴포넌트에서 불러오면 된다. 하지만 그냥 불러온다면 모달 컴포넌트가 보이기로는 맨앞에 보이지만 컴포넌트 트리 속 어딘가에 위치하게 되서 직관적이지 않게된다. 그래서 react-dom의 createPortal을 사용해서 기본의 컴포넌트 트리에서 벗어나게 직관적으로