11. portal-vue v2

vue version 2에서는 teleport 기능이 없기 때문에 portal-vue version 2 라이브러리를 사용하곤한다.

이 라이브러리의 장점은 UI적으로 body 태그의 직속 자식 태그로 랜더링 시켜야될 컴포넌트들,
(예를 들어, 팝업(모달), 드롭다운 리스트박스 등..)
하지만 vue component tree 위치는 코드분석 편의상 다른데 위치시켜야될 때 아주 유용하게 쓸 수 있다.

하지만, 딱 하나 단점이 있다.

이를 단점이라고 해야될지는 모르겠지만..

왜냐하면, 나는 vue component를 제작할 때, props로 component를 제어하는 방식을 별로 선호하지 않는다.
때문에 Headless Component 방식으로 제작하고있는데, 이를위해 vue component에선 provide/inject 방식을 사용하고있다.
그런데 필요상 portal-vue를 provide/inject 방식으로 제작한 Headless Component에 사용하면,
DOM Tree는 물론이고, Vue Component Tree도 변화가생겨 상위 컴포넌트에서 provide한 것을 하위 컴포넌트에서 inject하지 못하는 이슈가 생긴다.

이 점은 생각 못했는데, 어떻게하면 해결할 수 있을까?

---

portal-vue v3에서는 이를 해결한거 같다.

하지만 portal-vue v3은 vue3에서 사용할 수 있기 때문에, v2에서는 이 이슈를 해결할 수는 없을거같다.

더군다나 vue3에선 teleport가 내장되어있기 때문에 portal-vue v3를 쓸 일이 없다.

vue3의 teleport, portal-vue v3 모두 vue component tree는 유지한채 DOM tree만 수정한다.