# React-Portal

pengoose_dev

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

maantano

요약 부모 컴포넌트 DOM 계층 구조 바깥에 있는 DOM 노드에 자식을 렌더링 하는 기술 Example 이러한 구조의 파일이라고 가정했을 때 실제로 렌더링하면 아래와 같이 보여진다. 렌더링 완료 된 화면 및 HTML. 컴포넌트 구조 상 Parent 아래에 Child가 있어야 할 것 같지만 그렇지 않다. 어떻게 다른 DOM에 따로 Render? 우리는 React를 사용할 때 JSX 문법을 사용해 잘 모르지만, 사실 코드는 아래와 같이 정리된다

himprover

❗ (주의) 본 게시글의 내용은 검증되지 않았으며, 틀린 부분이 많을 확률이 높습니다. 들어가며 > ... 그래가지고 제 생각에는 root 계층에 모달을 구현할 때 React Portal을 사용하면 될 것 같은데 전역 상태를 사용하고자 한 이유가 있으신가요? 큰일났다. React Portal이 뭐였는지 기억이 나지 않았다.. 바로 얼마 전에 있었던 일이다..ㅠㅠ 하지만 결국 내가 부족한 것이기에 오늘은 별 다른 사족 없이 React Portal을 뜯어보고자 한다.... 모르는걸 인정하는 것만 중요한 것이 아닌, 알고자 하는 것도 중요하기 때문이다. (ㅠㅠ) Portal?

pengoose_dev

Hydration Error 리팩터링을 진행하는 과정에서, window가 mount되기 전에 발생하는 hydration Error를 관리하는 코드가 컴포넌트별로 반복된다는 것을 발견했다. 따라서, 이를 재사용이 가능한 HydrationHandler 컴포넌트로 선언해, Error Handler가 필요한 파일 내에서 import하는 방식을 채택했다. 원하는 컴포넌트에서 import 및 사용. reactPortal