개발자

Next.js에서 React Portal을 잘못 적용한건지 궁금합니다.

2023년 12월 30일조회 77

안녕하세요! next.js에서 모달 구현을 위해 react portal을 사용하였습니다. 그런데 제가 의도한 것과 다른 결과가 나와 코드를 잘못 작성한건지, 제가 portal에 대해 이해를 잘못 하고 있는건지 궁금해 질문드립니다. 현재 next.js 14.0.4 + tailwind 환경에서 작업하고 있습니다. // src/app/layout.tsx (사진1 첨부) // src/components/modal/ Modal.tsx (사진2 첨부) // 실제 출력 화면 (사진3 첨부) portal을 사용하면 같은 body 태그안에 있는 형제 컴포넌트의 z-index의 영향을 받지 않는다고 알고 있는데, 첨부한 사진과 같이 <body> 안 형제 컴포넌트 하위에 위치한 컴포넌트의 z-index의 영향을 받고 있습니다. portal로 출력할 부분을 children으로도 받아보고, 포탈 컴포넌트 안에서도 작성해보고 했는데 모두 동일한 결과가 출력됩니다. 포탈 컴포넌트에도 z-index를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다. 감사합니다!

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!