overlay-kit unmount 관련 문제 해결

[cskime]

개요

• overlay-kit은 overlay 요소를 선언적으로 관리할 수 있는 방법을 제공하는 package 입니다.
• App root를 <OverlayProvider>로 감싼 뒤, overlay 객체를 import해서 open() 함수를 호출하여 선언적으로 overlay를 표시합니다.
• open() 함수에 전달하는 callback으로 전달되는 3가지 주요 argument는 아래와 같습니다.
  • isOpen : overlay 요소를 화면에 표시하는 조건으로 사용할 수 있는 state 값
  • close : overlay 요소를 닫는 action (isOpen을 false로 전환)
  • unmount : overlay 요소를 메모리에서 제거
• close()를 호출하면 isOpen이 false가 되면서 화면에서 사라지게 만들 수 있지만, 메모리에는 남아있습니다. 그래서, close()만 호출해서 닫은 다음 같은 key로 open()을 호출하면 이전 상태를 유지하면서 overlay 요소를 열 수 있습니다.
• unmount()는 overlay 요소를 닫은 다음 메모리에서 해제하여 memory leak을 방지하기 위해 제공되는 함수입니다. close()를 호출해서 overlay 요소를 닫은 다음, animation 등이 끝난 뒤 overlay가 완전히 닫히면 unmount()를 호출해서 메모리를 정리합니다.

문제 상황 및 원인

• overlay-kit 문서에는 overlay 요소의 useEffect cleanup 함수에서 unmount를 호출하도록 가이드하고 있습니다. 그런데, 이렇게 구현하면 overlay가 동작하지 않습니다. (재현 코드)
• 일반적으로 React 기반 프로젝트에서는 'strict mode'를 사용하는데, strict mode는 개발 환경에서 component rendering을 두 번씩 진행하여 side effect로 인해 발생할 수 있는 버그를 미리 발견할 수 있도록 합니다.
• 이 때, component가 두 번째 rendering 되는 시점에 useEffect의 cleanup 함수가 한 번 호출됩니다.
• Overlay 요소는 useEffect의 cleanup 함수에서 unmount 함수를 호출하고 있으므로, 결과적으로 overlay를 열자마자 닫아버리게 됩니다.

해결 방법

• close()를 호출한 뒤 component가 화면에서 완전히 사라진 시점에 unmount()를 직접 호출해줍니다.
• 일반적으로 overlay 요소는 닫는 animation이 끝난 뒤 화면에서 사라지므로, close() 호출 후 setTimeout을 통해 animation duration 이후 unmount()가 호출되도록 구현하면 됩니다.
• motion package를 사용한다면, AnimatePresense component의 onExitComplete prop으로 unmount 함수를 전달하는 방식으로 구현할 수 있습니다.

요약

• 우리 프로젝트에서는 overlay-kit과 motion package를 모두 사용해서 modal과 drawer component를 구현하고 있으므로, AnimatePresense의 onExitComplete prop으로 unmount 함수를 전달하는 방식으로 구현하여 문제를 해결할 수 있습니다.
• 이 문제는 FE 단톡방에 질문을 올렸는데, 토스 현직자분께서 확인하셔서 해결 방법을 공유해주셨고 가이드 문서도 이 방법으로 수정될 예정입니다. (제안받은 코드)