TIL-23.06.05

 

 

문제점

팝업 모달창 기능구현을 위해 그동안 해왔던 root div 한 곳에 렌더링 해오던 방식에 대해 수정할 필요성을 느낌

진정한 의미의 모달 기능구현은 다른 root div에서 모달이 팝업되어 기존에 렌더링되어 있는 컴포넌트를 덮는것

 

 

 

시도한점

모달을 렌더링 해주기 위한 또 다른 루트 div <div id='modal-root'></div>을 index.html body에 작성해주고,

modal-root div에 모달컴포넌트를 전송해주기위해 createPortal 기능을 활용

재사용을 위해 Portal을 만들어주는 컴포넌트를 작성

const ModalPortal = ({ children }) => {
  const modalRoot = document.getElementById('modal-root');
  return createPortal(children, modalRoot);
};

해당 컴포넌트의 자식요소로 모달컴포넌트가 들어오면 이걸 포탈을 이용해 modal-root div에 전송해 렌더링 시켜준다.

  <ModalPortal>
     <CommentDelModal onAccess={handleDelCheck} />
  </ModalPortal>

이런식으로 모달창을 렌더링할 해당 컴포넌트의 return부분에서 재사용가능하게끔 작성해놓은 ModalPortal컴포넌트의 자식요소로 모달컴포넌트를 넣어주면된다.

결과적으로 기존의 컴포넌트들은 root div에 담겨지고, 포탈을 이용한 모달컴포넌트들은 modal-root div라는 곳에 따로 담겨져

각각 따로 관리할수있게된다. 또한 렌더링된 기존의 컴포넌트 위를 가리며 렌더링되는 모달창의 개념도 이렇게 따로 렌더링되는것이 더 정확하다고 생각된다.

 

 

 

 

알게된점

개발자분들의 블로그 글들을 읽어보다가 모달창 관리에 대한 방법을 알게되었다. index.html파일에 기존의 root div외에 또 다른 root div를 만들어 컴포넌트들을 따로 렌더링시킨다는 개념이 생소했고, 실제로 가능하다는걸 내가 직접 코드를 작성해가며 알게되었다.