부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 방법 입니다.
위의 내용만 봐서는 문득 Portal을 사용하는 이유에 대해 감히 잡히지 않으실거 같습니다.
그래서 제가 예시를 가져왔습니다!
위 사진에서 중점적으로 봐야 할 것은 바로 Modal 입니다!
사진에 보이듯 오버레이가 다른 HTML 코드 안에 중첩되어 있다면 기술적으로 좋은 코드나 구조가 아닙니다.
(*Overlay: 어떠한 HTML 요소 위에 또 다른 HTML 요소가 겹치게 보이는 효과 / 모달창, 사이드 드로어, 다이얼로그 등)
또한, 추후에 스크린 리더가 렌더링 되는 HTML 해석할 때 일반적인 오버레이라고 인식하지 못 할 수도 있습니다.
이러한 문제를 해결하기 위해서는 아래의 사진처럼 오버레이가 다른 태그가 아닌 독립적인 태그에 있는것이 가장 좋고 리액트에서는 이러한 방법을 쉽게 해결해 주는 기능으로 Portals를 사용하고 있습니다.
이 기능을 사용하여 문제를 해결하는 방법에 대해서 알아보도록 하겠습니다.
먼저, 포탈을 사용하기 위해서는 2가지 조건이 필요합니다.
하나는 컴포넌트를 이동시킬 장소이고 다른 하나는 컴포넌트에게 그곳에서 포탈을 가져와야 한다고 알려줘야하는 것 입니다.
먼저 컴포넌트를 이동시킬 장소를 만들어 보도록 하겠습니다.
저는 root 요소 위로 렌더링 시키기 위해서 public 폴더에 index.html 안에 작업을 하도록 하겠습니다.
이제 포탈을 사용할 컴포넌트에 가서 포탈의 위치를 이야기 해주면 됩니다.
먼저 포탈을 사용하기 위해서는 react-dom을 import 해줘야 합니다.
그 이유는 실제 Dom의 위치가 다르기 때문입니다.
그리고 ReactDom에서 createPortal()메서드를 호출 합니다.
createPortal() 메서드는 두개의 인수를 가지고 있는데 첫 번째는 렌더링 되어야 하는 리액트 노드 입니다.
두 번째는 실제 노드의 위치를 가리키는 위치 입니다. 그러기 위해서는 Dom의 API인 document.getElementById()를 사용해서 실제 노드의 위치를 가르쳐 줘야 합니다.
사진을 보면 내용이 어려울수 있지만 react-dom을 import 해주고 포탈을 사용 할 Modal 컴포넌트를 생성해준 뒤 ErrorModal 안의 ReactDom.createPortal() 메서드 안에 첫번째 인수로 Modal 컴포넌트를 작성해주고 두번째 인수로 변경될 실제 노드의 위치를 작성해 주면 됩니다.
두번째 인수 같은 경우는 index.js에서 document.getElementById('root') 루트를 설정해주는 것 처럼 modal을 public 파일의 index.html에 있는 위치로 설정해줬기 때문에 Dom의 API를 사용하였습니다.
자 이제 실제로 변경된 사항을 컴토해보도록 하겠습니다.
Portal 사용 전
Portal 사용 후
두 사진의 Elements를 보면 처음에는 root 안에 있던 모달창이 root 바깥으로 옮겨진걸 볼 수 있습니다.
'프로그래밍 > React' 카테고리의 다른 글
| React useState 란? (0) | 2023.05.11 |
|---|---|
| React useEffect 란? (0) | 2023.05.08 |
| React useReducer란? (0) | 2023.05.08 |
| React ref 란? (0) | 2023.04.27 |
| React Fragment란? (0) | 2023.04.26 |