[React] ResizeObserver loop completed with undelivered notifications 에러 해결 방법

 

ResizeObserver 에러 해결 방법

 

 기존의 프로젝트를 수정하던 중 한페이지에서 ResizeObserver 에러가 발생하였다. 별거 아닌 에러인 줄 알고 열심히 해결 방법을 찾아보았으나 저 에러가 중요한 에러가 아니기 때문에 무시하거나 에러가 발생하지 않게 처리하는 방법 밖에 없어서 근본적인 문제를 해결하기 위해 ResizeObserver 에러에 대해 찾아보니 ResizeObserver를 통해 크기 변경을 감지할 때, 크기 변경 알림이 제대로 처리되지 않아  ResizeObserver가 비정상적으로 작동할 때 발생한다. 이는 레이아웃이 변경되는 과정에서 발생할 수 있으며, 사용자가 크기를 조정할 수 없는 열에서 발생할 가능성도 있다고 한다.

 

 뭐 여러가지 방법이 있겠지만 저 에러의 근본적인 문제를 파악하기 위해 ResizeObserver가 비정상적으로 작동할 때 발생지를 먼저 찾았다. 주석 처리를 하면서 해당 컴포넌트를 찾으니 DataGrid 컴포넌트에서 발생한것을 알아냈고 해당 컬럼열들의 넓이가 DataGrid보다 넓이가 커서 발생한 것을 알아냈다.

 

해결방법

1. 해당 에러가 발생하는 컴포넌트를 찾는다.

=> 컴포넌트를 하나씩 주석 처리해가면서 에러가 발생하지 않는 컴포넌트를 먼저 찾는다.

 

2-1. 해당 컴포넌트의 컬럼의 길이를 수동 설정하여 Datagrid의 넓이 보다 작게 맞춰줌

수정전

↓

수정후

 

 

2-2.  해당 컴포넌트의 width와 overflow를 설정해줌 (overflow:hidden 또는 overflow:scroll)

 

overflow:hidden → 해당 크기를 넘어가면 짤림

 

overflow:scroll → 해당 크기를 넘어가면 스크롤 생김

 

 

위와 같이 설정을 해주면 ResizeObserver 에러가 안뜨는 것을 확인 할 수가 있다. ResizeObserver 오류 처리등을 이용하여 오류를 안뜨게는 할 수 있지만 페이지를 새로고침을 했을때 등 에러가 다시 발생할 수 있어 이 에러는 근본적인 발생 원인을 알고 처리하면 좀 더 확실한 해결이 가능하다.