React에서 keyboardEvent의 타겟을 debounce 처리하는 것은 React가 합성 이벤트와 이벤트 풀링을 관리하는 방식 때문에 문제가 발생할 수 있습니다.

이벤트 핸들러를 debounce 처리하면, 실제 함수가 이벤트가 트리거된 마지막 이후로 일정 지연 시간이 지난 후에만 실행됩니다. 이는 주로 키보드 이벤트와 같이 빠르게 발생하는 이벤트의 호출 빈도를 줄이기 위해 사용됩니다.

그러나 React에서 합성 이벤트는 성능을 위해 풀링되어 재사용됩니다. 이는 이벤트 핸들러가 호출된 후에 합성 이벤트 객체가 다른 이벤트를 위해 재사용되는 것을 의미합니다. 이벤트 핸들러 실행이 완료된 후에는 이벤트 속성들이 무효화되거나 초기화되어 메모리 누수를 방지하고 성능을 향상시킵니다.

keyboardEvent의 타겟을 debounce 처리하면, 이벤트 핸들러가 마치 일반적으로 호출되는 것처럼 작동합니다. 그러나 실제로는 debounce된 함수가 이벤트 핸들러의 작업을 완료한 후에 실행되며, 이 때 합성 이벤트 객체의 속성들을 액세스하려고 하면 이전에 풀링되어 무효화된 이벤트 속성들에 접근하게 됩니다. 이로 인해 다음과 같은 경고가 발생합니다:

경고: 이 합성 이벤트는 성능을 위해 재사용됩니다. 이 메서드 key에 접근하고 있는 경우, 이는 해제되거나 무효화된 합성 이벤트입니다. 이것은 무효한 함수입니다. 원본 합성 이벤트를 유지해야 하는 경우 event.persist()를 사용하십시오. 자세한 내용은 https://fb.me/react-event-pooling 를 참조하십시오.

React는 합성 이벤트의 속성에 접근할 때 이미 해제되거나 무효화된 합성 이벤트에 접근하고 있다는 경고를 보내며, 이 함수 호출은 실제로는 아무것도 수행하지 않습니다.

이러한 문제를 해결하기 위해서는, debounce된 함수 내에서 event.persist()를 호출하여 합성 이벤트를 풀링 시스템에서 분리시켜야 합니다. 이렇게 하면 무효화된 합성 이벤트의 속성에 안전하게 접근할 수 있습니다. 그러나 event.persist()를 사용하면 메모리 사용량이 증가할 수 있으므로, 불필요한 경우에는 사용을 삼가하는 것이 좋습니다.

대안적인 방법으로는 이벤트 핸들러 전체를 debounce 처리하는 대신, 필요한 부분만 _.debounce로 지연 처리하고, 이벤트 핸들러 자체는 일반 함수로 유지하는 것입니다. 이렇게 하면 릴리스된 합성 이벤트의 속성에 접근하는 문제를 피할 수 있습니다.

Ref

• chatGPT => "react에서 keyboardEvent의 타겟을 debounce걸어주는게 왜 문제가될까?"