Portal

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공한다. - 공식문서

 

활용

모달을 구현할 때 유용하게 활용할 수 있다.

모달을 구현 시 제일 까다로운 부분은 z-index 설정이다. z-index는 부모 안에서만 적용되기 때문에 다른 컴포넌트가 z-index가 더 높은 경우 모달이 해당 컴포넌트에 가린다거나 하는 문제가 발생한다.

그렇기 때문에 최상위 컴포넌트에 조건부 렌더링으로 모달을 달아놓고 redux로 해당 상태를 관리해서 모달을 구현하는 식으로 사용을 했었다.

<TopComponent>
    {...생략}
    {isModalOpen && <Modal/>}
</TopComponent>

하지만 이렇게 구현했을 때는 많은 문제점이 있다.

1) 모달에 정보를 줄 때 redux를 활용함 - 이는 redux의 본래 취지(많은 컴포넌트에서 사용하는 애들을 공통으로 관리)에 맞지 않고 redux에 저장하는 상태들이 필요 이상으로 많아진다.

2) 모달을 띄우는 부분과 실제 모달이 보여지는 곳이 서로 다른 곳에 있어서 수정할 때도 번거롭고, 좋지 않다.

React의 Portal을 활용하면 이러한 문제점들이 해결된다.

<JasikComponent>
	<Button onClick={setIsModalOpen(true)}/>
    {isModalOpen && <Modal props={...자식에 있는 상태,프롭들}/>}
</JasikComponent>

const Modal = (props) => {
	return ReactDOM.createPortal(
    	<div {...생략}>{...생략}</div>,
        body // 반드시 DOM 노드여야함
    )
}

이런 식으로 부모에 있는 상태,프롭들을 내려줘서 활용할 수 있고 기존 컴포넌트들과 똑같이 상태,프롭에 따른 업데이트가 되서 훨씬 다루기 편해진다.

또 모달을 부르는 곳과 보여지는 곳 (코드상) 이 같아져서 수정할 때도 훨씬 편하다.

 

단점

1. 반드시 DOM노드에만 활용할 수 있다. 다른 리액트 컴포넌트에는 삽입할 수가 없다.

2. 그래서 활용할 곳이 많지는 않다. 모달에 활용할 수 있고, 기본적으로 canvas 가 화면에 처음부터 박혀 있는 서비스 ( ex: 그림 그리기 앱) 같은 곳에서도 활용할 수 있을 것 같다.