- 리엑트 네이티브에서 TextInput에 텍스트를 입력할 때마다 useForm에 setValue를 이용하여 "keyword"값에 입력된 문자열 값을 할당하도록 했다.
- 그리고 이 입력된 값을 useEffect를 이용하여 register에 "keyword"를 입력하였다.
- 그리고 쿼리 요청에 담을 변수는 watch()를 이용하였다. 이렇게 되면 텍스트를 입력할 때마다 요청을 보내게 된다.
- 이 과정에서 제목과 같은 에러가 콘솔에 출력되었다.
- 검색해보니 해당 자료를 찾았다.
“Warning: This synthetic event is reused for performance reasons”
This warning is triggered when we try to access to a React synthetic event in an asynchronous way. Because of the reuse, after the event callback has been invoked the synthetic event object will no longer exist so we cannot access its properties.
The most common example of an asynchronous access to a SyntheticEvent is within a setState. When we update a component state through the updater function, the updater will be called asynchronously and the event will be already nullified.
"리엑트의 동기적 이벤트에 비동기적인 방법으로 접근할 때" 해당 오류가 발생한다고 한다. 동기적 이벤트가 이벤트를 부르고, 그렇게 되면 이벤트 객체는 더 이상 존재하지 않게되어 해당 속성에 접근할 수 없게 된다고 한다.
가장 흔한 예를 들면, 비동기적인 방법으로 동기적 이벤트에 접근하는 흔한 방식은 "setState"이라 한다.
과정을 살펴보면
- 업데이트 함수를 통해 컴포넌트의 state가 갱신된다.
- 그럴 때 업데이트 함수는 비동기적으로 불러와지면
- 그렇게 될 때 이벤트는 이미 빈 값이게 되어 오류가 발생하게 되는 것이다.
요약해보면, 비동기적인 방법으로 이벤트 객체에 접근하게 되면, 이벤트 객체가 이미 존재하지 않기 때문에 해당 오류가 발생한다는 의미로 이해했다!
따라서 해당 자료에서 제시하는 해결법은 두 가지가 있는데
방법 1
event.persist()
- 해당 방법을 통해 이벤트가 비동기적으로도 유지하게 할 수 있다.
방법 2
cache the needed properties
- 해당 방법을 통해 비동기적으로 이벤트에 직접 접근하는 대신, 이벤트 핸들러 안에서 필요한 이벤트 속성을 저장하고, 저장한 속성을 비동기 콜백 함수에 넘겨주는 것이 가능하게 된다.
참고 자료
https://medium.com/trabe/react-syntheticevent-reuse-889cd52981b6
꾸준한 기록