[항해 99 주특기 주차 12일차]

<회고록>

오늘은 어제 했던 리엑트 3주차 프로젝트에 대해서 내가 몰랐던 부분들에 대해서 정리를 해볼려고 한다. 바로 react portal이다. 지난번에 내가 portal을 만들때는 root와 portal-target이렇게 2개를 만들고 이 2개 내에서 진행을 했었다. 하지만 이런 방식은 App 컴포넌트와 동일한 선상에서 제작하는 것이기 때문에 App 컴포넌트와의 상태 관리를 같이 하는 것이 굉장히 어려웠다. 그래서 매니저님께 내가 한 것을 보여드리면서 이런 부분들은 어떻게 고치는 것이 좋냐라고 물어보니 react portal이라는 것을 추천해주셨다. 그래서 오늘은 react portal에 대해서 다뤄볼려고 한다.

 

1. portal 그래서 내가 아는 그거야?!

portal은 한국말로 포탈 즉 우리가 게임, 영상, 드라마 등 여러 매체에서 등장하는 포탈 그 개념이다. 즉 차원을 이동하는 문 라고 생각하면 편하다. 이를 react에서는 어떻게 사용할까? 리엑트에서는 root와 동일선상에 있는 다른 dom에다가 컴포넌트를 넣고 싶을 때 사용한다.

즉 자세히 말하기 위해 한가지 예시를 들겠다.

/public/index.html


<div id = "root"></div>
<div id = "portal-target"></div>

이런 형식의 2가지 돔이 있다고 하자. 내가 만약에 root dom안에서 즉 App 컴포넌트안에서 작업하고 있는 컴포넌트를 portal-target으로 보내고 싶을때는 어떻게 할까? 이때 사용하는 개념이 바로 react portal이다. 즉 어떤 컴포넌트를 다른 곳으로 이동시키고 싶을 때 사용하는 통로 역할을 포탈이 맡는 것이다. 이런 식으로 portal-target을 통해서 데이터를 보낼 수 있다. 그렇다면 실제로는 어떻게 보내는가?

 

ReactDom.createPortal(component, container);

이런식으로 ReactDom안에 있는 createPortal이라는 메소드를 사용해서 구현한다. 이때 component에는 내가 보낼 컴포넌트 container에는 내가 보낼 목적지가 들어간다. 예를 들어 내가 portal-target에  A컴포넌트를 보내고 싶을 때는 portal-target이 container A컴포넌트가 component에 해당한다.