-
[React] Portal 사용해서 Modal 만들어보기프로그래밍/React 2023. 7. 11. 16:24
원리
Portal의 사용 원리에 대해서 간단하게 설명하자면
1. index.html에 나타나는 우리 root 와 동일선상에 portal에서 사용할 공간을 생성해 준다
2. portal component를 생성해서 로직을 작성한다.
getElementById를 통헤서 root옆에 만들어 주었던 공간을 가져오고 createPoral을 이용해서 연결을 해준다
createPortal( <StyledModal> <img src="" alt="" /> <button onClick={onClickModalHandler}>끄기</button> </StyledModal>, document.getElementById("modal") )
3. creatPortal의 인자값으로 첫번째는 불러올 Modal을 넣고 두번째는 이동할 위치인 element를 넣는다
주의사항
포탈을 이용해서 root 옆으로 불러오긴했지만 z-index값을 적용한 DOM요소(?)보다 상위에 위치하지 않기때문에 z-index 값을 사용하였다면 Portal을 사용하는 children에도 z-index를 설정을 해주어야 원하는대로 나온다.
'프로그래밍 > React' 카테고리의 다른 글
[유투브 어딘가] 통신에 관련된 영상을 잠깐보았다. (0) 2023.07.18 [React] ReactQuery에 대해서 좀 더 알아보자 (0) 2023.07.12 [React] useCallback VS React.Memo VS useEffect (0) 2023.07.03 [리액트 알쓸신잡] Hook - 1 - useMemo VS useCallback (0) 2023.06.22 [리액트 다루는 기술] 리덕스 작동원리 && 기초 (0) 2023.06.21