내용
요약
대시보드에서 셀 위치를 드래그로 변경한 뒤 손을 놓을 때, React에서 "Unable to find node on an unmounted component" (또는 언마운트된 컴포넌트 관련) 오류/경고가 발생하는 문제를 수정했습니다.
재현 절차
대시보드 편집 화면으로 이동
빠르게 셀을 드래그해서 위치 변경
드래그를 놓음
(특정 환경/타이밍에서) 콘솔에 위 오류 또는 관련 경고 출력
원인
onLayoutChange에서 곧바로 onPositionChange를 호출하면 부모가 즉시 리렌더링됨
그 시점에 react-grid-layout/DraggableCore가 아직 DOM 정리 중이라, React가 이미 제거되거나 옮겨진 노드를 참조함
드래그 직후 컴포넌트가 언마운트되면, 지연된 콜백이 언마운트된 뒤에 실행될 수 있음
해결 방법
onPositionChange 호출을 setTimeout(..., 0)으로 한 틱 지연처리
그리드 라이브러리 DOM 처리 후에 부모가 갱신되도록 함 지연된 콜백 실행 전에 _isMounted를 확인해, 언마운트된 경우에는 onPositionChange를 호출하지 않도록 함
내용
요약
대시보드에서 셀 위치를 드래그로 변경한 뒤 손을 놓을 때, React에서 "Unable to find node on an unmounted component" (또는 언마운트된 컴포넌트 관련) 오류/경고가 발생하는 문제를 수정했습니다.
재현 절차
대시보드 편집 화면으로 이동
빠르게 셀을 드래그해서 위치 변경
드래그를 놓음
(특정 환경/타이밍에서) 콘솔에 위 오류 또는 관련 경고 출력
원인
onLayoutChange에서 곧바로 onPositionChange를 호출하면 부모가 즉시 리렌더링됨
그 시점에 react-grid-layout/DraggableCore가 아직 DOM 정리 중이라, React가 이미 제거되거나 옮겨진 노드를 참조함
드래그 직후 컴포넌트가 언마운트되면, 지연된 콜백이 언마운트된 뒤에 실행될 수 있음
해결 방법
onPositionChange 호출을 setTimeout(..., 0)으로 한 틱 지연처리
그리드 라이브러리 DOM 처리 후에 부모가 갱신되도록 함 지연된 콜백 실행 전에 _isMounted를 확인해, 언마운트된 경우에는 onPositionChange를 호출하지 않도록 함