modal-root질문드립니다.
2
29 câu hỏi đã được viết
안녕하세요 강사님
강의처럼 따라후 돔요소를보니까
modal-root div안에 dialog가 있는게 아닌 body아래 독립적으로 존재하고있는데요 이러면 createportal을 왜쓰는건지 잘 이해가안갑니다..
import { ImageIcon } from "lucide-react";
import { Button } from "../ui/button";
import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
import { usePostEditorModal } from "@/store/post-editor-modal";
export default function PostEditorModal() {
const { isOpen, close } = usePostEditorModal();
const handleCLoseModal = () => {
close();
};
return (
<Dialog open={isOpen} onOpenChange={handleCLoseModal}>
<DialogContent>
<DialogTitle>포스트 작성</DialogTitle>
<textarea />
<Button>
<ImageIcon />
이미지 추가
</Button>
<Button>저장</Button>
</DialogContent>
</Dialog>
);
}
Câu trả lời 1
0
안녕하세요, 인프런 AI 인턴입니다. 나마스테님, 질문해 주셔서 감사합니다.
createPortal은 컴포넌트를 React 컴포넌트 트리에서 제거하는 기능이 아니라, 실제 DOM에 렌더링되는 위치만 다른 곳으로 옮기는 기능입니다.
현재 사용 중인 Dialog, DialogContent는 Radix UI 기반 컴포넌트이므로 내부적으로 Dialog.Portal을 사용해 모달을 body 아래에 렌더링할 수 있습니다. 따라서 React 컴포넌트 구조상으로는 PostEditorModal 내부에 DialogContent가 존재하지만, 브라우저 개발자 도구의 DOM에서는 body 아래 별도의 위치에 표시됩니다.
이렇게 모달을 별도 위치에 렌더링하는 이유는 다음과 같습니다.
- 부모 요소의
overflow: hidden영향을 피할 수 있습니다.
- 부모 요소의
z-index나 stacking context 간섭을 줄일 수 있습니다.
- 모달을 화면 전체 기준으로 안정적으로 배치할 수 있습니다.
- 일반 페이지 콘텐츠와 모달 DOM을 분리하여 관리할 수 있습니다.
즉, 개발자 도구에서 dialog가 body 아래 독립적으로 보이는 것이 바로 Portal이 정상적으로 동작하고 있다는 의미입니다. modal-root 안에 반드시 dialog가 있어야 하는 것은 아니며, Radix UI가 자체 Portal 대상이나 body를 사용하도록 구현되어 있을 수 있습니다.
비슷한 내용은 아래 기존 답변에서도 확인하실 수 있습니다.
섹션 8 모달 관련 질문
createPortal을 사용해도 React 컴포넌트 트리상의 위치는 유지되고, 실제 DOM 렌더링 위치만 변경된다는 설명이 있습니다.전역 모달이 여러 개일 경우 모달 프로바이더는 몇 개가 필요한가요?
여러 모달을 하나의 Portal 대상에 렌더링하는 방식과modal-root의 역할에 대한 답변입니다.
참고하신 이미지: 이미지 원본
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
모달 여러개 질문드립니다
0
3
1
tsconfig.app.json 파일 설정(경로 별칭 옵션) 관련 질문입니다.
0
37
2
onSettled 질문드립니다.
0
59
2
Zustand의 Store 타입은 어떤 기준으로 작성하는 건가요?
0
91
2
포스트 작성 중 이탈 방지 기능 (취소 버튼 클릭 시 오류)
0
95
2
"포스트 생성에 실패했습니다" 실패 문구와 함께 에러가 발생합니다ㅠㅠ
0
96
2
강의자료는 어떻게 제작하시나요?
0
107
2
비밀번호 재설정 1회용 이메일 링크
0
115
1
강의 수강 후 포트폴리오 준비 방향에 대해 조언 부탁드립니다.
2
118
1
회원가입 구현 (구현 후 최종 화면 출력 X)
0
143
2
(6.11) 회원가입시 프로필 정보 자동 생성하기 Q. 호출 순서 문의
0
91
1
명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이
0
96
2
useMutation 적용 후 새로운 글 등록시 content가 안보여요
0
120
3
6.8 zustand 세션 질문입니다.
0
170
2
next.js 강의에서도 리액트 라이브러리들을 다뤄주시나요?
0
146
2
shadcn에서 radix ui와 base ui 차이는 뭔가요?
1
813
2
updateTodo 함수 생성시 화살표 함수 사용 안하는 이유
0
136
2
4.11 바로 투두 삭제가 안됨 질문
0
156
3
매개변수 updatedTodo 관련 질문
0
126
3
인증 정보가 만료되었을 때 라우트 가드 처리가 궁금합니다!
0
140
2
supabase를 사용하지 않을 경우 세션 데이터의 변경을 감지하고 스토어에 보관하는 방법이 궁금합니다!
0
136
2
4.6 id를 string으로 변경시 오류
0
140
2
리액트 타입스크립트 관련 질문있습니다.
0
106
1
소셜 로그인 구현하기 관련하여 질문이 있습니다!
0
168
2