docs: 엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)

Author: toothlessdev

contents/posts/React/react-create-portal-modal.md

@@ -0,0 +1,67 @@
+---
+title: 엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)
+createdAt: 2025-06-27
+category: React
+description: React 에서 Modal 컴포넌트를 구현할때 단순히 z-index 를 높게 줬을때 발생하는 문제와 createPortal 을 이용해 해결하는 방법에 대해 알아봅니다.
+comment: true
+---
+
+# 엥? Modal 그거 z-index:99999 박으면 되는거 아님? (feat. createPortal과 Stacking Context)
+
+:::warning
+아직 작성중이거나 검토중인 글입니다. 내용이 부정확하거나 변경될 수 있습니다
+:::
+
+웹 개발을 하다보면 **Modal** 컴포넌트를 구현해야 하는 순간이 자주 찾아옵니다.
+
+> 회원 가입시 약관 동의 <br/>
+> 게시글 삭제 전 "정말 삭제하시겠습니까?" <br/>
+> 결제 진행전 마지막 확인 ...
+
+모달은 중요한 의사결정 직전에 모달은 사용자의 행동을 한번 더 되짚어주는 역할을 합니다. <br/>
+
+:::details [토스는 모달을 언제, 어떻게 띄울까? (feat. 모달 경험 잘 설계하기)](https://medium.com/@beomsu/%ED%86%A0%EC%8A%A4%EB%8A%94-%EB%AA%A8%EB%8B%AC%EC%9D%84-%EC%96%B8%EC%A0%9C-%EC%96%B4%EB%96%BB%EA%B2%8C-%EB%9D%84%EC%9A%B8%EA%B9%8C-841e97dda1eb)
+
+모달은 크게 Alert와 Sheet로 구분됩니다. <br/>
+
+- Alert는 화면 정중앙에 위치하고 투명한 검은색을 배경으로 가집니다. 주로 사용자에게 즉시 필요한 중대한 정보를 담을 때 쓰입니다.
+- Sheet는 화면 하단부에 위치하고 투명한 검은색을 배경으로 가집니다. 주로 사용자가 현재 맥락과 밀접한 관련이 있는 특정한 작업을 수행하게 할 때 쓰입니다.
+- 토스가 Alert를 쓰는 경우는 아래의 4가지입니다.<br/>
+  ① 기기 또는 시스템 설정에 접근해야 하는 경우, <br/>
+  ② 입력했던 정보를 파괴하는 행동을 하려는 경우,<br/>
+  ③ 시스템상 오류가 발생한 경우,<br/>
+  ④ 다음 화면으로 진행하는 데 피요한 작업을 요구하는 경우입니다.<br/>
+  ①, ②, ③은 Alert를 적절히 사용했지만 ③은 새로운 화면, ④는 Sheet라는 대안이 가능합니다.
+- 토스가 Sheet를 쓰는 경우는 아래의 4가지입니다. <br/>
+  ① 다음 화면으로 진행하는 데 필요한 작업을 요구하는 경우 <br/>
+  ② 현재 화면에 영향을 미치는 작업을 요구하는 경우<br/>
+  ③ 현재 화면과 관련된 정보를 전달하는 경우,<br/>
+  ④ 기기 또는 시스템 설정에 접근해야 하는 경우입니다.<br/>
+  ①, ②, ③은 Sheet를 적절히 사용했지만 ④는 Alert라는 대안이 가능합니다.
+
+:::
+
+모달은 단순한 UI 컴포넌트가 아니라, 사용자의 실수를 줄이고, 중요한 액션에 집중하게 만드는 중요한 역할을 합니다.
+
+그만큼 사용자 경험 (UX) 에서 중요한 역할을 하는데, <br/>
+개발자의 입장에서는 "어떻게 화면 위에 모달을 띄우지?" 라는 고민이 생깁니다.
+
+## 🤓 엥? Modal 그거 z-index:99999 박으면 되는거 아님?
+
+```css
+.modal {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 99999; /* 화면에서 가장 위에 위치 */
+}
+```
+
+처음 모달을 구현할 때 대부분 이렇게 생각합니다 <br/>
+저도 그랬습니다 😅
+
+하지만 z-index 를 높게 주는 것만으로는 모달이 항상 화면 위에 위치한다는 보장이 없습니다. <br/>
+왜냐하면 z-index 는 `Stacking Context` 와 `Containing Block` 에 영향을 받기 때문입니다.
+
+## 🤨 Stacking Context 가 뭔데 ?