useReducer를 활용한 실시간 퀴즈 애플리케이션 상태 관리 리팩토링

들어가며

개발자로서 새로운 기술이나 패턴을 접할 때마다 "이걸 실제로 써볼 수 있을까?"라는 생각을 하게 됩니다. useReducer도 마찬가지였습니다. 부스트캠프 마스터 클래스에서 처음 접했을 때는 단순히 'Redux의 축소판' 정도로만 생각했고, useState가 더 직관적이고 사용하기 쉬워 보였기 때문에 실제 프로젝트에 적용할 생각은 하지 않았습니다.

하지만 실시간 퀴즈 애플리케이션을 개발하면서, 다음과 같은 상황들이 계속해서 발생했습니다:

• 여러 개의 useState가 서로 얽혀있는 상황
• 상태 업데이트 로직이 여러 함수에 분산된 상황
• 웹소켓 이벤트와 상태 관리를 일관되게 처리해야 하는 상황
• 실시간 데이터 동기화가 필요한 상황

이러한 복잡성을 다루면서, useReducer의 필요성을 절실히 느끼게 되었고, 이는 리팩토링의 방향성이 되었습니다.

useReducer란?

개념 이해하기

useReducer는 복잡한 상태 관리를 위한 React의 내장 Hook입니다. 하지만 이를 더 쉽게 이해하기 위해, 우리 주변의 친숙한 시스템과 비교해 보겠습니다.

graph LR
    A[현재 상태<br/>주문 현황판] --> B[상태 변경 요청<br/>주문]
    B --> C[변경 규칙<br/>주방장]
    C --> D[새로운 상태<br/>업데이트된 현황판]
    D --> A

학교 식당의 주문 시스템을 예로 들면:

1. 현재 상태(State) = 주문 현황판
2. 액션(Action) = 학생의 주문 ("김치찌개 1개 추가요!")
3. 리듀서(Reducer) = 주문을 받아 현황판을 업데이트하는 주방장
4. 새로운 상태 = 업데이트된 주문 현황판

useState vs useReducer

두 상태 관리 방식의 차이를 시각적으로 비교해보겠습니다: