Race Condition

Race Condition (경합 상태)이란?

경쟁 상태(Race Condition)란 위의 그림처럼 여러 프로세스나 스레드가 동시에 작업을 수행할 때, 실행 순서나 타이밍에 따라 최종 결과가 예측 불가능하게 달라지는 상태를 의미합니다.

소프트웨어 개발, 특히 프론트엔드 환경에서는 비동기 요청(Network Request)들이 이 “자동차” 역할을 합니다. 우리가 의도한 순서(먼저 보낸 요청이 먼저 도착)와 상관없이, 네트워크 지연이나 서버 처리 속도에 따라 나중에 보낸 요청이 먼저 도착하거나, 이미 불필요해진 요청이 뒤늦게 도착하여 화면을 덮어쓰는 문제가 발생합니다.

Race Condition으로 인한 사용자의 일반적인 반응

• “평상시에 잘 되다가 어떨 때는 안 되고, 간헐적으로 오류가 발생합니다.”
• “분명 최신순으로 정렬했는데, 갑자기 옛날 데이터가 튀어나옵니다.”
• “탭을 빠르게 이동하다 보면 엉뚱한 화면이 나옵니다.”
• “검색 결과가 입력한 검색어랑 다르게 나옵니다.”

Vue 2 환경에서의 주요 원인: 반응형 시스템의 오용

Vue 2의 편리한 반응형 시스템이 비동기 로직과 만났을 때, Race Condition을 유발하는 안티 패턴이 되기도 합니다.

1. Watcher의 비동기 호출 남발

watch 옵션은 데이터 변경을 감지하기 쉽지만, 변경 시마다 API 요청을 보내면서 이전 요청을 취소(Cancel)하지 않는 경우가 많습니다. 사용자가 입력을 빠르게 변경하면 수많은 요청이 쌓이고, 응답 순서가 꼬이게 됩니다.

2. Template 내의 함수 실행

<!-- Bad Practice -->
<div v-if="fetchData(id)">...</div>

Template 내부에서 데이터를 가져오는 함수를 직접 실행하면, Re-render가 발생할 때마다 의도치 않게 함수가 재실행되어 중복 요청과 경합 상태를 만듭니다.

3. Computed 속성의 Side Effect

computed는 순수하게 값을 반환해야 하지만, 내부에서 비동기 요청을 보내거나 다른 상태를 변경(Side Effect)하는 경우 실행 시점을 예측하기 어려워 버그의 원인이 됩니다.