JavaScript와 경쟁 상태

JavaScript의 비동기적 특성 때문에 경쟁 상태가 발생할 가능성이 있다.
주로 다음과 같은 시나리오에서 나타난다.
1. 여러 번의 패치 요청
  - 사용자가 짧은 시간 안에 동일한 데이터를 여러 번 요청하거나, 다른 데이터를 연달아 요청할 때 발생할 수 있다.
2. 비동기적 처리
  - fetch() 함수는 비동기적으로 작동하기 때문에, 요청을 보낸 순서대로 응답이 도착한다는 보장이 없다.
  - 예를 들어, 두 개의 요청 A와 B를 보냈을 때, A보다 나중에 보낸 B의 응답이 먼저 도착할 수 있다.
이때, 먼저 도착한 B의 데이터로 화면이 업데이트된 후, 뒤늦게 도착한 A의 데이터로 다시 화면이 업데이트 되면서 사용자가 예상치 못한 결과를 보게 될 수 있다.
JavaScript에서 경쟁 상태(race condition)는 비동기적으로 작동하는 여러 작업이 공유 자원을 동시에 수정하거나 접근할 때 발생한다.
특히 사용자 인터페이스(UI)나 데이터 상태를 다루는 웹 애플리케이션에서 흔히 볼 수 있다.

발생하는 상황

가장 흔한 예시 중 하나이다.
사용자가 검색창에 빠르게 연속해서 글자를 입력할 때 발생할 수 있다.
문제: 사용자가 '사과'를 검색했다가 마음을 바꿔 빠르게 '배'를 검색한다.
시나리오
1. '사과'에 대한 API 요청이 보내진다.
2. '배'에 대한 API 요청이 보내집니다.
3. '배' 요청에 대한 응답이 먼저 도착하고, UI는 '배' 검색 결과로 업데이트됩니다.
4. 뒤늦게 '사과' 요청에 대한 응답이 도착하고, UI는 다시 '사과' 검색 결과로 덮어쓰인다.
결과: 사용자는 최종적으로 '배'를 검색했음에도 불구하고, 화면에는 '사과' 검색 결과가 나타나는 혼란을 겪게 된다.