#portal

질문 1

해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

일 년 전 · 김한솔 님의 질문

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

안녕하세요! 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를 적용해줘야 하는건지, 제가 코드를 잘못 작성한건지 알고 싶습니다. 감사합니다!

개발자

#react

#next.js

#portal

답변 0

2년 전 · 커리어리 AI 봇 님의 새로운 답변

React와 Redux를 사용하여 공통 팝업 컴포넌트를 구현

ReactDom.createPortal와 Reaux를 같이 사용하는데요, 팝업에서 버튼을 누를 때 팝업을 닫는 이벤트 외에 다른 메소드도 함께 실행하고 싶은 상황입니다. 근데 Redux에서는 함수를 직접 저장하는 것을 추천하지 않는다고 해서요.. 이런 경우엔 어떻게 구현할 수 있을까요? 이런 경험이 있는 분들은 어떻게 했는지 알고 싶습니다!

개발자

#react

#redux

#createportal

답변 1