[리액트] 🤷‍♀️Portal❓➡모달 창 만들어보자

Portal➡모달에서 주로 사용🙆‍♀️

👩‍🦱부모 컴포넌트의 DOM 계층 구조 바깥에 있는
DOM 노드로 👩‍자식을 렌더링하는 최고의 방법을 제공🤩

ReactDom.createPortal(child, container)

첫 번째 인자(child)➡엘리먼트, 문자열 혹은 fragment와
같은 어떤 종류이든 렌더링 할 수 있는 React 자식👩‍

🐱‍💻Protals 없이 모달 만들어보기

App.js

실행하면 모달 열기 버튼 하나랑 div 하나가 생김

🎨style 꾸며주기

▶모달 열기 버튼 div - modalWrapperStyle

▶Z-Index 2 div - higherIndexWrapperStyle

<div style={higherIndexWrapperStyle}>
  Z-Index 2
</div>

🤔왜 relative로 줬을까❓

relative 아니어도 상관없지만 포지션을
기본 값(static)이 아닌 다른 값을 줬다는 건
zIndex 사용할 때 zIndex는 포지션 static
이외의 것이 있어야만 zIndex가 먹힘 🌟

---

components>TestModal.js

App.js로 TestModal 컴포넌트 가져오기

🎨style

modalStyle

overlayStyle

💡backgroundColor: 'rgba(0, 0, 0, 0.7)'

💁‍♀️모달 닫기 중앙 정렬하려면❓

X에서 -50 ( width에 50만큼 왼쪽으로 ),
위로 50% 만큼 내려온 거니까 -50만큼 해주기

화면 짤려서 그러는데 딱 완전 정중앙에 배치 된 것❗

---

😎모달 기능만들기

App.js

🎇state 생성하기

const [isModalOpen, setIsModalOpen] = useState(false);

.

{/* 모달 */}
<TestModal
  open={isModalOpen}
  onclose={() => setIsModalOpen(false)}
>
  모달 내용
</TestModal>

.

<div style={modalWrapperStyle}>
  <button
    onClick={() => setIsModalOpen(true)}
  >
    모달 열기
  </button>

⬇

🐱‍🏍components>TestModal.js

🤔컴포넌트 안에 넣어준 부분은 어떻게 가져올까❓

App.js➡TestModal.js로 가져오기

👩‍Children이라고 가져오면 됨❗

Children은 정해진 이름임🙆‍♀️

if (!open) return null;
👉 모달이 안 열려 있으면 창 안 보이게 할 것

모달창 사라짐🚀

모달 열기 버튼 누르면 모달창이 오픈되고
모달 닫기 버튼 누르면 모달창이 닫아짐

---

🧐Z-Index 2를 모달보다 안으로 들어가게 하고 싶은데
왜 Z-Index 2가 더 앞으로 나오는 걸까❓

같은 계층에 있음

modalWrapperStyle(모달 열기 버튼 div)➡zIndex 1로 줬고
higherIndexWrapperStyle(Z-Index 2)➡zIndex 2로 줬음

자녀들에서 zIndex를 아무리 크게 줘도
이미 부모에서 zIndex가 지정되어서 위로 치고 나온 것🔥

원치 않는 부분이 모달 위로 나와 버리는 경우가 많이 있음😤

---

🧙‍해결사 Portal 이용하자🔮

🎥닥터 스트레인지🎬
전투 중 분리하면 포탈 만들어 상황을 빠져나감
악당을 포털로 넣어 순식간에 상황 종료 시켜 버림
깔깔😆

리액트도 어플리케이션을 이동시키는 기능을 제공❗
표현이 조금 생소하긴 하지만
어플리케이션이 마운트 되는 위치를 이동한다는 의미🐱‍🏍
루트 돔 트리를 벗어나 돔에서
어플리케이션의 일부분을 그릴 수 있음🙄❓

✅컨테이너가 리액트에선 하나
👉 Portal 만들면 컨테이너 하나 더 생성 할 수 있음👀

index.html

root는 이곳에 있음

🎇이곳에 protal 생성하기

억지로 생성해 놓았음

모달을 root 안에서 렌더링 하는 게 아니라
portal 안에 모달을 넣을 것🙆‍♀️✔

이렇게 하면 모달이 다른 계층들 보다 높겠져❓
👉 zIndex의 문제점 해결 됨🥳

🤷‍♀️저부분을 portal 안에 넣고 싶은데 어떻게 해야할까❓

TestModal.js

여기다가 어디다 넣을건지 지정해주기

이젠 zIndex 안 튀어나오는 걸 확인 할 수 있음👍

---

🌟Portal 쓰는 특징 하나 있음

portal로 넣었다 하더라도

저 div 요소의 자녀 요소들임

중첩이 되어 있음

🧼중첩되어 있으면 '이벤트 버블링' 일어날까❓

밑에서 위로 자녀에서 부모로 하나씩 하나씩 하나씩

이 자녀들에서 이벤트 발생했을 때

위로 버블링이 발생할까❓ 안할까❓

❣ 이벤트 버블링 가능함➡portal의 특징

<div style={modalWrapperStyle} 
  onClick={() => console.log('clicked')}>
  // ...

🖱App.js 부모 div에 클릭 이벤트 넣어줌

자녀 클릭해도 clicked가 뜸 이벤트 버블링 되는 걸 확인 할 수 있음🙆‍♀️