## Race Condition (경합 상태)이란?
<strong>경쟁 상태(Race Condition)</strong>란 위의 그림처럼 <strong>여러 프로세스나 스레드가 동시에 작업을 수행할 때, 실행 순서나 타이밍에 따라 최종 결과가 예측 불가능하게 달라지는 상태</strong>를 의미합니다.
소프트웨어 개발, 특히 프론트엔드 환경에서는 <strong>비동기 요청(Network Request)</strong>들이 이 "자동차" 역할을 합니다. 우리가 의도한 순서(먼저 보낸 요청이 먼저 도착)와 상관없이, <strong>네트워크 지연이나 서버 처리 속도</strong>에 따라 나중에 보낸 요청이 먼저 도착하거나, 이미 불필요해진 요청이 뒤늦게 도착하여 화면을 덮어쓰는 문제가 발생합니다.
## Race Condition으로 인한 사용자의 일반적인 반응
- "평상시에 잘 되다가 어떨 때는 안 되고, 간헐적으로 오류가 발생합니다."
- "분명 최신순으로 정렬했는데, 갑자기 옛날 데이터가 튀어나옵니다."
- "탭을 빠르게 이동하다 보면 엉뚱한 화면이 나옵니다."
- "검색 결과가 입력한 검색어랑 다르게 나옵니다."
## Vue 2 환경에서의 주요 원인: 반응형 시스템의 오용
Vue 2의 편리한 반응형 시스템이 비동기 로직과 만났을 때, Race Condition을 유발하는 안티 패턴이 되기도 합니다.
### 1. Watcher의 비동기 호출 남발
`watch` 옵션은 데이터 변경을 감지하기 쉽지만, 변경 시마다 API 요청을 보내면서 **이전 요청을 취소(Cancel)하지 않는 경우**가 많습니다. 사용자가 입력을 빠르게 변경하면 수많은 요청이 쌓이고, 응답 순서가 꼬이게 됩니다.
### 2. Template 내의 함수 실행
```html
<!-- Bad Practice -->
<div v-if="fetchData(id)">...</div>
```
Template 내부에서 데이터를 가져오는 함수를 직접 실행하면, **Re-render가 발생할 때마다 의도치 않게 함수가 재실행**되어 중복 요청과 경합 상태를 만듭니다.
### 3. Computed 속성의 Side Effect
`computed`는 순수하게 값을 반환해야 하지만, 내부에서 비동기 요청을 보내거나 다른 상태를 변경(Side Effect)하는 경우 실행 시점을 예측하기 어려워 버그의 원인이 됩니다.