문제
rabbitMq에서 데이터를 받아서 state에 set하는 과정을 거치는데, 갑자기 데이터가 여러개 들어오면 처음 데이터의 state에 set이 끝난걸 보기 전에 제일 마지막 데이터가 바로 set이 되어 버리는 현상
해결방법
기본적으로 react에서 사용되는 setState들을 동기적으로 동작하지 않는다. 그렇기 때문에 이를 동기적으로 작동하도록 바꿀 수 있는 방법을 찾아보았다
flushSync( () => {
setSomeState(queData)
})이렇게 쓴다면 queData를 set하는게 동기적으로 작동하기 때문에 해당 state가 변하는 것을 바로 확인해볼 수 있다.
주의할 점 : flushSync는 강력한 도구지만, 애플리케이션의 전체적인 성능에 영향을 줄 수 있으므로 신중하게 사용해야 한다. 일반적으로 React가 스스로 작업의 우선순위를 관리하도록 하는 것이 좋다. 원하는 동작을 보장해야 하는 상황에서만 flushSync를 사용하자.
참조 블로그
'React' 카테고리의 다른 글
| [React] 'GET http://localhost:3000/User', "Uncaught SyntaxError: Unexpected token '<' " Error (0) | 2023.09.14 |
|---|---|
| [React, TypeScript] 실시간 시세표 일정 시간만 border 노출하기 (0) | 2023.09.08 |
| [React, TypeScript] Object is possibly 'null' (0) | 2023.09.07 |
| [React, Spring Boot] Whitelabel Error Page문제 (0) | 2023.09.07 |
| [React, TypeScript] TradingView lightweight-charts 사용 (0) | 2023.09.07 |