# [[Redux|Redux]] ## πŸ“Œ Brief Summary ReduxλŠ” 예츑 κ°€λŠ₯ν•œ μƒνƒœ μ»¨ν…Œμ΄λ„ˆλ‘œ, λΆˆλ³€μ„±μ„ μœ μ§€ν•˜λŠ” μ—…λ°μ΄νŠΈ, μ•‘μ…˜ λ””μŠ€νŒ¨μΉ˜(action dispatch), 그리고 λ¦¬λ“€μ„œ(reducer)λ₯Ό 톡해 μ „μ—­ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λŠ” μ‚°μ—… ν‘œμ€€ λΌμ΄λΈŒλŸ¬λ¦¬μ΄λ‹€ [1]. 주둜 λ³΅μž‘ν•œ νŒŒμƒ 및 κ³„μ‚°λœ μƒνƒœκ°€ μ‘΄μž¬ν•˜κ±°λ‚˜ 500개 μ΄μƒμ˜ μ»΄ν¬λ„ŒνŠΈλ₯Ό λ‹€λ£¨λŠ” λŒ€κ·œλͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μΌκ΄€λœ 개발 νŒ¨ν„΄μ„ κ°•μ œν•˜κΈ° μœ„ν•΄ μ±„νƒλœλ‹€ [2]. RTK Query와 Redux DevTools 같은 μ„±μˆ™ν•œ μƒνƒœκ³„λ₯Ό 톡해 비동기 μƒνƒœ κ΄€λ¦¬μ˜ λ³΅μž‘μ„±μ„ 쀄이고 κ°•λ ₯ν•œ 디버깅 κΈ°λŠ₯을 μ œκ³΅ν•œλ‹€ [2-4]. ## πŸ“– Core λŒ€Content * **μƒνƒœ 관리 μ•„ν‚€ν…μ²˜μ™€ ꡬ쑰화**: ReduxλŠ” λΆˆλ³€μ„±μ„ 기반으둜 μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜λ©°, μ•‘μ…˜κ³Ό λ¦¬λ“€μ„œ νŒ¨ν„΄μ„ 톡해 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λ³΅μž‘ν•œ μƒνƒœ λ‘œμ§μ„ μ œμ–΄ν•œλ‹€ [1]. λͺ¨λ˜ ν”„λ‘ νŠΈμ—”λ“œ 폴더 κ΅¬μ‘°μ—μ„œ Redux 슬라이슀(Redux slices)와 κΈ€λ‘œλ²Œ μƒνƒœ κ΄€λ ¨ λ‘œμ§μ€ μ „λ‹΄ 디렉토리인 `store/`에 λ°°μΉ˜λœλ‹€ [5-7]. 10λͺ… μ΄μƒμ˜ κ°œλ°œμžκ°€ ν˜‘μ—…ν•˜λŠ” μ‘°μ§μ΄λ‚˜ 이컀머슀, 금육 μ‹œμŠ€ν…œκ³Ό 같이 λ―Έμ…˜ ν¬λ¦¬ν‹°μ»¬ν•œ 데이터 무결성이 μ€‘μš”ν•œ ν”„λ‘œμ νŠΈμ—μ„œ μ½”λ“œ μž‘μ„±μ˜ 일관성을 κ°•μ œν•˜λŠ” λΌˆλŒ€ 역할을 ν•œλ‹€ [2]. * **μ„±λŠ₯ μ΅œμ ν™” 및 μƒνƒœ ꡬ독**: λ‚΄μž₯된 React Context APIλŠ” μƒνƒœμ˜ μΌλΆ€λ§Œ λ³€κ²½λ˜μ–΄λ„ ν•΄λ‹Ή μ»¨ν…μŠ€νŠΈλ₯Ό κ΅¬λ…ν•˜λŠ” λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈμ— 무차별적인 λ¦¬λ Œλ”λ§μ„ μœ λ°œν•˜λŠ” 반면, ReduxλŠ” ꡬ독 둜직과 λ Œλ”λ§μ„ λͺ…ν™•νžˆ λΆ„λ¦¬ν•œλ‹€ [3, 8-10]. μ„ νƒμž(Selector)λ₯Ό μ‚¬μš©ν•΄ ν•„μš”ν•œ νŒŒμƒ μƒνƒœλ§Œ μ»΄ν¬λ„ŒνŠΈμ— κ³΅κΈ‰ν•˜μ—¬ μ„±λŠ₯κ³Ό μ΅œμ ν™”λ₯Ό 보μž₯ν•œλ‹€ [3]. * **비동기 데이터 관리 (RTK Query λ„μž…)**: κ³Όκ±° ReduxλŠ” 비동기 μ²˜λ¦¬μ— λ§‰λŒ€ν•œ μ–‘μ˜ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈ μ½”λ“œ(Thunk, Saga λ“±)κ°€ ν•„μš”ν–ˆμœΌλ‚˜, ν˜„μž¬λŠ” RTK Queryλ₯Ό 톡해 문제λ₯Ό ν•΄κ²°ν•œλ‹€ [2, 4]. RTK QueryλŠ” 데이터 캐싱, 쀑볡 μš”μ²­ 제거, μžλ™ 데이터 μž¬μš”μ²­ κΈ°λŠ₯ 등을 기본으둜 μ œκ³΅ν•˜μ—¬ 비동기 μž‘μ—… μ½”λ“œλ₯Ό 획기적으둜 쀄여쀀닀 [4]. * **디버깅과 좔적성**: Redux의 κ°€μž₯ 큰 차별점은 λΈŒλΌμš°μ €μ˜ Redux DevToolsλ₯Ό ν™œμš©ν•œ 'μ‹œκ°„ μ—¬ν–‰ 디버깅(Time-Travel Debugging)'이닀 [2, 3]. μƒνƒœ λ³€ν™” 이λ ₯을 과거둜 λŒλ €λ³΄κ±°λ‚˜ μ•‘μ…˜μ„ μž¬ν˜„ν•  수 μžˆμ–΄, 심야에 λ°œμƒν•˜λŠ” λ³΅μž‘ν•œ 운영 ν™˜κ²½μ˜ 비동기 버그도 λͺ‡ λΆ„ 내에 μ‹œκ°μ μœΌλ‘œ νŒŒμ•…ν•˜κ²Œ ν•΄μ€€λ‹€ [3, 11, 12]. * **ν•œκ³„μ  및 μ£Όμ˜μ‚¬ν•­**: ReduxλŠ” λ„μž… μ‹œ λ§‰λŒ€ν•œ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈ, μ •κ·œν™”λœ μƒνƒœ κ΄€λ¦¬μ˜ λ‚œν•΄ν•¨, 미듀웨어 μˆœμ„œ 였λ₯˜, 그리고 κΉ¨μ§€κΈ° μ‰¬μš΄ μ„ νƒμž λ©”λͺ¨μ΄μ œμ΄μ…˜ λ“±μ˜ ν•œκ³„λ₯Ό κ°€μ§„λ‹€ [13]. λ˜ν•œ λͺ¨λ“  μƒνƒœλ₯Ό ν•˜λ‚˜μ˜ 큰 λ¦¬λ“€μ„œμ— λͺ°μ•„λ„£λŠ” "God Reducer" κ΅¬μ‘°λ‚˜ νŒ€ λ‹¨μœ„μ˜ μ•‘μ…˜ κ²°ν•©(Action Coupling)은 λŒ€ν‘œμ μΈ μ•ˆν‹° νŒ¨ν„΄μœΌλ‘œ μ§€μ λœλ‹€ [13, 14]. μ΅œμ‹  νŠΈλ Œλ“œμ—μ„œλŠ” 이와 같은 단일(monolithic) μŠ€ν† μ–΄ ꡬ쑰의 λ³΅μž‘μ„±μ„ ν”Όν•˜κΈ° μœ„ν•΄ ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœμ™€ μ„œλ²„ μƒνƒœλ₯Ό λΆ„λ¦¬ν•˜λŠ” λ“± 보닀 νŒŒνŽΈν™”λœ λ°©μ‹μœΌλ‘œ μ§„ν™”ν•˜κ³  μžˆλ‹€ [15]. ## πŸ”— Knowledge Connections ### Related Concepts - [[Context API|Context API]] - μ—°κ²° 이유: Redux와 자주 λΉ„κ΅λ˜λŠ” React의 λ‚΄μž₯ μƒνƒœ 곡유 κΈ°λŠ₯으둜, μ†Œκ·œλͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ ν…Œλ§ˆλ‚˜ μ–Έμ–΄ μ„€μ • 등을 κ΄€λ¦¬ν•˜κΈ° μ ν•©ν•˜μ§€λ§Œ, μƒνƒœ λ³€κ²½ μ‹œ λ°œμƒν•˜λŠ” λŒ€κ·œλͺ¨ λ¦¬λ Œλ”λ§ 폭풍(Re-render Storm)을 μœ λ°œν•˜μ—¬ λŒ€κ·œλͺ¨ μ•±μ—μ„œ Reduxκ°€ ν•„μš”ν•œ λ‹Ήμœ„μ„±μ„ μ œκ³΅ν•œλ‹€ [8, 9, 16]. - 이 κ°œλ…μ„ 톡해 더 깊게 이해할 수 μžˆλŠ” λΆ€λΆ„: μƒνƒœ ꡬ독 μ•„ν‚€ν…μ²˜μ˜ 차이가 React μ»΄ν¬λ„ŒνŠΈμ˜ λ¦¬λ Œλ”λ§ μ„±λŠ₯에 λ―ΈμΉ˜λŠ” 치λͺ…적인 영ν–₯μ„± [8, 10]. - Zustand - μ—°κ²° 이유: Redux의 무거운 λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈμ™€ Context API의 μ„±λŠ₯ 문제 μ‚¬μ΄μ—μ„œ μ μ ˆν•œ νƒ€ν˜‘μ μ„ μ œκ³΅ν•˜λŠ” κ²½λŸ‰ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬μ΄λ‹€ [17-19]. - 이 κ°œλ…μ„ 톡해 더 깊게 이해할 수 μžˆλŠ” λΆ€λΆ„: μƒνƒœ 관리 라이브러리의 κ³Όλ„ν•œ μœ μ—°μ„±(Zustand)이 νŒ€ λ‹¨μœ„ ν˜‘μ—…μ—μ„œ μ–΄λ–»κ²Œ 비동기 νŒ¨ν„΄μ˜ νŒŒνŽΈν™”μ™€ ν˜Όλž€μ„ μ•ΌκΈ°ν•  수 μžˆλŠ”μ§€, λŒ€μ‘°μ μœΌλ‘œ Redux의 μ—„κ²©ν•œ ꡬ쑰가 κ°–λŠ” 방어적 이점 [1, 11, 18, 20]. - RTK Query - μ—°κ²° 이유: Redux Toolkit(RTK) μƒνƒœκ³„μ— ν¬ν•¨λœ 데이터 패칭 및 캐싱 도ꡬ이닀 [4]. - 이 κ°œλ…μ„ 톡해 더 깊게 이해할 수 μžˆλŠ” λΆ€λΆ„: Reduxκ°€ μ–΄λ–»κ²Œ λ‹¨μˆœν•œ ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœ 관리λ₯Ό λ„˜μ–΄ μ„œλ²„ API 응닡(캐싱, λ¬΄νš¨ν™”, μž¬μš”μ²­)μ΄λΌλŠ” ν˜„λŒ€μ μΈ μš”κ΅¬μ‚¬ν•­μ„ λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈ 없이 μ†Œν™”ν•˜λŠ”μ§€ νŒŒμ•… [4, 21]. - Time-Travel Debugging - μ—°κ²° 이유: Redux DevToolsκ°€ μ œκ³΅ν•˜λŠ” 고유의 κ°•λ ₯ν•œ κΈ°λŠ₯으둜, μ–Έμ œ μ–΄λ–€ μ•‘μ…˜μ΄ λ””μŠ€νŒ¨μΉ˜λ˜μ–΄ μƒνƒœκ°€ μ–΄λ–»κ²Œ λ³€κ²½λ˜μ—ˆλŠ”μ§€ κΈ°λ‘ν•˜κ³  λ˜κ°λŠ” κΈ°μˆ μ΄λ‹€ [2, 3]. - 이 κ°œλ…μ„ 톡해 더 깊게 이해할 수 μžˆλŠ” λΆ€λΆ„: 5λ…„ 이상 μ§€μ†λ˜λŠ” μ—”ν„°ν”„λΌμ΄μ¦ˆ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μ•„ν‚€ν…μ²˜μ˜ 디버깅 μ—­λŸ‰μ΄ 개발자의 생산성 및 μž₯μ•  λŒ€μ‘μ— λ―ΈμΉ˜λŠ” 영ν–₯ [11, 12]. ### Deeper Research Questions - Redux의 μƒνƒœ ꡬ독 및 μ„ νƒμž(selector) νŒ¨ν„΄μ€ λ‚΄λΆ€μ μœΌλ‘œ Context API와 μ–΄λ–»κ²Œ λ‹€λ₯΄κ²Œ μ„€κ³„λ˜μ–΄ λΆ€λΆ„ μƒνƒœ λ³€κ²½ μ‹œ λΆˆν•„μš”ν•œ λ¦¬λ Œλ”λ§μ„ μ°¨λ‹¨ν•˜λŠ”κ°€? - RTK Queryλ₯Ό ν†΅ν•œ Redux 비동기 μƒνƒœ κ΄€λ¦¬λŠ” Zustand ν™˜κ²½μ—μ„œ μ‚¬μš©μžκ°€ 직접 κ΅¬ν˜„ν•˜λŠ” 비동기 캐싱 νŒ¨ν„΄κ³Ό 비ꡐ해 μ–΄λ– ν•œ μ•„ν‚€ν…μ²˜μ  μ•ˆμ •μ„±μ„ λ‹΄λ³΄ν•˜λŠ”κ°€? - "God Reducer" μ•ˆν‹° νŒ¨ν„΄μ΄ λŒ€κ·œλͺ¨ React μ½”λ“œλ² μ΄μŠ€ λ‚΄λΉ„κ²Œμ΄μ…˜ 및 μ„±λŠ₯ μ΅œμ ν™”μ— λ―ΈμΉ˜λŠ” 치λͺ…적인 λΆ€μž‘μš©μ€ 무엇인가? - ν”„λ‘ νŠΈμ—”λ“œ μƒνƒœ 관리가 과거의 κ±°λŒ€ν•œ 단일 μŠ€ν† μ–΄ λ°©μ‹μ—μ„œ 'μ„œλ²„ μƒνƒœ'와 'ν΄λΌμ΄μ–ΈνŠΈ 둜컬 μƒνƒœ'둜 νŒŒνŽΈν™”(Fragmentation)λ˜λŠ” μ΅œμ‹  νŠΈλ Œλ“œ μ†μ—μ„œ, Redux의 적정 μ‚¬μš© λ²”μœ„λŠ” μ–΄λ–»κ²Œ μž¬μ‘°μ •λ˜μ—ˆλŠ”κ°€? - 10λͺ… μ΄μƒμ˜ μ‹œλ‹ˆμ–΄ 및 μ£Όλ‹ˆμ–΄ κ°œλ°œμžκ°€ 혼재된 νŒ€μ—μ„œ Redux의 λ³΄μΌλŸ¬ν”Œλ ˆμ΄νŠΈλŠ” 개발 속도λ₯Ό μ €ν•˜μ‹œν‚€λŠ” 뢀채인가, μ•„λ‹ˆλ©΄ 버그λ₯Ό 사전에 λ°©μ§€ν•˜λŠ” ꡬ쑰적 방어막인가? ### Practical Application Contexts - **Implementation:** React ν”„λ‘œμ νŠΈμ˜ `store/` λ˜λŠ” `features/` 디렉토리에 도메인별 Redux sliceλ₯Ό λ°°μΉ˜ν•˜μ—¬ μ „μ—­ μƒνƒœ 및 비동기 데이터λ₯Ό μ„ μ–Έν•˜κ³  μ•‘μ…˜κ³Ό λ³‘ν•©ν•˜μ—¬ κ΄€λ¦¬ν•œλ‹€ [5-7]. - **System Design:** μž₯κΈ° μœ μ§€λ³΄μˆ˜κ°€ μš”κ΅¬λ˜λŠ” λŒ€κ·œλͺ¨ μ—”ν„°ν”„λΌμ΄μ¦ˆ μ‹œμŠ€ν…œ(이컀머슀 결제 λ“± 데이터 흐름이 μ€‘μš”ν•œ 500개 μ»΄ν¬λ„ŒνŠΈ μ΄μƒμ˜ μ•±)μ—μ„œ νŒŒμƒ μƒνƒœ μ²˜λ¦¬μ™€ νŒ€ 개발 νŒ¨ν„΄ κ°•μ œν™” λͺ©μ μœΌλ‘œ μ±„νƒν•œλ‹€ [2, 12, 13, 22]. - **Operation / Maintenance:** ν”„λ‘œλ•μ…˜ ν™˜κ²½μ΄λ‚˜ 디버깅 μ‹œ Redux DevToolsλ₯Ό μ—°λ™ν•˜μ—¬ νŠΉμ • UI λ²„κ·Έλ‚˜ 비동기 데이터 κΌ¬μž„ ν˜„μƒμ„ μ‹œκ°μ μΈ μ•‘μ…˜ νžˆμŠ€ν† λ¦¬λ₯Ό 톡해 λ‹¨μ‹œκ°„μ— ν•΄κ²°ν•œλ‹€ [11, 12]. - **Learning Path:** ν”„λ‘ νŠΈμ—”λ“œ ꡐ윑 μ‹œ, Context API의 κ·Όλ³Έ 원리와 ν•œκ³„λ₯Ό λ¨Όμ € ν•™μŠ΅ν•˜κ³ , Zustand의 생산성을 κ²½ν—˜ν•œ λ’€, μ—”ν„°ν”„λΌμ΄μ¦ˆ ν‘œμ€€μ΄μž κ°€μž₯ λ³΅μž‘λ„κ°€ 높은 Redux의 νŒ¨ν„΄κ³Ό ꡬ쑰적 이점을 μ΅œμ’…μ μœΌλ‘œ ν•™μŠ΅ν•˜λŠ” 단계적 접근이 μš”κ΅¬λœλ‹€ [23]. - **My Project Relevance:** κΈ€λ‘œλ²Œ μƒνƒœκ°€ λ‹€μˆ˜μ˜ μ»΄ν¬λ„ŒνŠΈμ— λ³΅μž‘ν•˜κ²Œ μ–½ν˜€ μžˆκ±°λ‚˜, νŒ€μ› κ°„ λ™μΌν•œ 비동기/μƒνƒœ 관리 ꡬ쑰λ₯Ό κ°•μ œν•˜μ—¬ νŒŒνŽΈν™”λ₯Ό 막아야 ν•˜λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ ꡬ좕할 λ•Œ 핡심적인 기술 μŠ€νƒμœΌλ‘œ 검토될 수 μžˆλ‹€ [1, 12]. ### Adjacent Topics - Server State Management (TanStack Query λ“±) - ν™•μž₯ λ°©ν–₯: ν΄λΌμ΄μ–ΈνŠΈ μ „μ—­ μƒνƒœμ™€ κ΅¬λ³„λ˜λŠ” "μ„œλ²„ 데이터(API 캐싱, 동기화, λ‘œλ”©/μ—λŸ¬ 사이클)"λ§Œμ„ μ „λ¬Έμ μœΌλ‘œ μ²˜λ¦¬ν•˜λŠ” λͺ¨λ˜ λΌμ΄λΈŒλŸ¬λ¦¬μ™€ Redux의 μ—­ν•  비ꡐ 및 연동 λ°©μ•ˆ 탐색 [24, 25]. - React Rendering Optimization - ν™•μž₯ λ°©ν–₯: μƒνƒœ 관리 라이브러리의 선택과 λ³„κ°œλ‘œ, React μ»΄ν¬λ„ŒνŠΈ 생λͺ…μ£ΌκΈ° 및 λ©”λͺ¨μ΄μ œμ΄μ…˜(`useMemo`, `useCallback`, `React.memo`)이 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ νΌν¬λ¨ΌμŠ€μ— λ―ΈμΉ˜λŠ” 원리와 ν”„λ‘œνŒŒμΌλ§ 방법 탐색 [26-28]. --- *Last updated: 2026-04-30*