Portal

DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링 하는 최고의 방법

전에 했던 ThankyouDialog.jsx를 사용한다

Open클릭

하하하가 안나오도록 덮어지지 않는다

ThankyouDialog를 마지막에 오도록 내려보면

덮어진다

현재는 한 부모안에서 바꿀 수 있지만 이게 어느 컴포넌트 속에 속에 속에 들어있다면 이 모든 레이어가 이미 순차적으로 갖고 있는 UI의 스택을 벗어나는 일을 할 수가 없다 

이럴 때 Portal이 필요하다

다시 하고

html에 root아래 <div id="portal"></div>을 적고

드래그 한 그대로 적는다

root밑에 컴포넌트가 계속 생겼는데 그걸 벗어나는 Portal에다가 이 자녀를 바로 그려버리는 것

Portal을 넣으면

Open이 없다

 

Dialog버튼에 드래그 되어있는 것을 준다

Open클릭하면

Portal을 주석처리 하면

하하하가 덮어지지 않는다

 

Portal은 root에 들어있지 않고 Portal에 들어있다

Portal의 자식의 이벤트가 일어나도 Portal의 부모한테는 가도 root에는 안가야 맞는데 하지만 리액트는 이것을 동작하게 해준다

 

open을 눌러도 div로 간다

모달이나 모든 레이어에서 벗어나서 새로운 동작을 해야하는 것 -> 이럴 때 Portal을 사용한다