[poco] 1회차 글작성

[poco111]

리액트의 portal 부분을 학습하고 사용하면서 고민되었던 부분과 관련해서 동적 portal을 생성하고 사용하는 방법에 대해서 정리한 글입니다.

링크

[ahnlook]

저도 세컨드핸드 때 portal 사용을 많이 했었는데 포코가 고민하신 관점에서 생각을 못해봤는데, 덕분에 다른 관점에서 생각해볼 수 있어서 좋았어요! portal은 사용할 때 고민해볼 수 있는 요소가 많아서 좋더라구요! 커스텀 동적 포탈 잘 보고 갑니다 🙂

[질문]

• 리액트에서 document.body.appendChild 구문을 사용하게 되면 리액트의 가상돔이 아닌 실제돔을 컨트롤하는 거라 좋지 않다고 알고 있는데 포코가 직접 작성한 Portal에서는 이슈가 없는지 궁금해요!
• createPortal의 두번째 인자로 document.body를 직접 넘겨서 사용하는 방법도 있었을 것 같은데 직접 element를 만들어서 전달하신 이유가 궁금해요! (저는 아무 생각 없이 document.body를 넘겼어서... 🫨)

  createPortal(
  <S.PortalWrap>
    <S.Portal>{children}</S.Portal>
  </S.PortalWrap>,
  modalDiv.current
  );

  createPortal(
  <S.PortalWrap>
    <S.Portal>{children}</S.Portal>
  </S.PortalWrap>,
  document.body
  );

[피드백]

• 5. 고민 🤔 > ErrorModal 컴포넌트의 렌저링 부분 오타가 있네요!

[poco111]

[답변]

• document.body.appendChild 구문 사용 이유 : 리뷰 덕분에 확인해보니 appendChild, removeChild 같이 실제 돔을 조작하는 것은 React에서 지양하는 것은 맞지만, Portal를 사용하는 이유가 독립적인 돔 요소를 생성하고 컴포넌트 트리에서 분리하기 위함이고 포탈 컴포넌트는 React 컴포넌트의 생명주기에 따라 관리되는 것이 아니라 외부의 실제 돔 요소로 이동되고 관리되기 때문이라고 생각합니다.
• createPortal의 두 번째 인자 관련 내용 : document.body 외에 다른 div를 생성하고 두 번째 인자로 전달한 가장 큰 이유는 스타일 적용이었습니다. document.body가 아닌 외부 요소로 렌더링하면, 해당 컴포넌트는 외부 컨테이너 안에서 격리되고 컴포넌트의 스타일 및 레이아웃이 외부 컨테이너에 영향을 주지 않고 독립적으로 관리할 수 있다고 생각했습니다.

🙇‍♂️ 리뷰 감사합니다.