Js abortController ( feat : Race condition, React, fetch, Suspense )

React 18 버전에서 컴포넌트별 lazy loading 을 구현하다 rabbit hole 에 빠져 허우적 댄 경험을 까먹지라도 않으려고 포스팅을 남긴다. 그 전에 race condition 이 뭔지 알아보고 가자 간단하게 말하면 두 개 이상의 스레드가 하나의 공유 자원에 접근해서 일어나는 상태 ( 또는 그로 인해 발생하는 버그 ) 라고 생각하자 더 쉽게 두 개 이상의 스레드 = 유저가 두개의 검색을 실행하면 fetch('your_url?example=예시') 이런게 두개 실행된다. 하나의 공유 자원 = fetch 로 받아온 data 로 뿌려지는 ui JS 가 두 개 이상의 스레드? 우리가 쓴 코드는 싱글 스레드로 실행되지만, 브라우저는 멀티 스테르도 작동한다. 버그가 발생하는 코드 예시 const S..

2023.12.12