# [[State Management Migration]] ## πŸ“Œ Brief Summary μƒνƒœ 관리 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜(State Management Migration)은 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 규λͺ¨μ™€ λ³΅μž‘μ„±μ΄ 증가함에 따라 기쑴의 μƒνƒœ 관리 도ꡬ(예: Context API λ˜λŠ” Redux)λ₯Ό ν˜„μž¬ ν”„λ‘œμ νŠΈ μš”κ΅¬μ‚¬ν•­μ— 더 μ ν•©ν•œ 도ꡬ(예: Zustand, TanStack Query)둜 μ „ν™˜ν•˜λŠ” 과정을 μ˜λ―Έν•©λ‹ˆλ‹€ [1-4]. 성곡적인 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ μœ„ν•΄μ„œλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 전체λ₯Ό ν•œ λ²ˆμ— μž¬μž‘μ„±ν•˜λŠ” 것을 ν”Όν•˜κ³ , 기술 뢀채λ₯Ό κ΄€λ¦¬ν•˜λ©΄μ„œ κΈ°λŠ₯ κ°œλ°œμ„ μ€‘λ‹¨ν•˜μ§€ μ•Šλ„λ‘ 점진적인 μ ‘κ·Ό 방식을 μ·¨ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€ [3]. ## πŸ“– Core Content * **μ£Όμš” λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ 경둜 및 λ‚œμ΄λ„** * **Context APIμ—μ„œ Zustand둜의 μ „ν™˜ (쉬움)**: Context APIλŠ” μž¦μ€ μƒνƒœ μ—…λ°μ΄νŠΈ μ‹œ ꡬ독 쀑인 λͺ¨λ“  μ»΄ν¬λ„ŒνŠΈμ˜ λΆˆν•„μš”ν•œ μž¬λ Œλ”λ§μ„ μœ λ°œν•  수 μžˆμœΌλ―€λ‘œ, μ•±μ˜ 규λͺ¨κ°€ 컀질 λ•Œ Zustand둜 μ „ν™˜ν•˜μ—¬ λ Œλ”λ§ μ„±λŠ₯을 μ΅œμ ν™”ν•˜λŠ” 것이 μœ λ¦¬ν•©λ‹ˆλ‹€ [2, 5]. * **Zustandμ—μ„œ Redux둜의 μ „ν™˜ (어렀움)**: 초기 ν”„λ‘œμ νŠΈμ—μ„œλŠ” Zustand의 μœ μ—°μ„±κ³Ό λΉ λ₯Έ 속도가 이점을 μ£Όμ§€λ§Œ, νŒ€ 규λͺ¨κ°€ 컀지고(예: 50~500λͺ…) μΌκ΄€λœ ꡬ쑰가 ν•„μš”ν•΄μ§€λŠ” ν•œκ³„μ μ— λ„λ‹¬ν•˜λ©΄ μ—„κ²©ν•œ νŒ¨ν„΄μ„ κ°•μ œν•˜λŠ” Redux둜의 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ κ³„νšν•΄μ•Ό ν•©λ‹ˆλ‹€ [1, 2]. * **Reduxμ—μ„œ Zustand둜의 μ „ν™˜ (μœ„ν—˜ν•¨)**: κ°€λŠ₯은 ν•˜μ§€λ§Œ μœ„ν—˜μ„±μ΄ λ”°λ₯΄λŠ”(Possible but risky) μž‘μ—…μž…λ‹ˆλ‹€ [2]. * **Redux 제거 및 TanStack Query λ„μž…**: μ„œλ²„ μƒνƒœλ₯Ό κ΄€λ¦¬ν•˜κΈ° μœ„ν•΄ TanStack Query(React Query)λ₯Ό μΆ”κ°€ν•˜λ©΄μ„œ 기쑴의 Redux κ΅¬ν˜„μ„ μ œκ±°ν•˜κ³ , 남은 κΈ€λ‘œλ²Œ ν΄λΌμ΄μ–ΈνŠΈ μƒνƒœλ§Œ Contextλ‚˜ Zustand둜 κ°€λ³κ²Œ κ΄€λ¦¬ν•˜λŠ” λ¦¬νŒ©ν† λ§ λ°©ν–₯도 ꢌμž₯λ©λ‹ˆλ‹€ [4]. * **점진적 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜(Incremental Migration) μ „λž΅** * 기쑴의 κΈ°μˆ μ—μ„œ μƒˆλ‘œμš΄ 기술둜 λ§ˆμ΄κ·Έλ ˆμ΄μ…˜ν•  λ•Œ, 전체 μ½”λ“œλ₯Ό ν•œ λ²ˆμ— μž¬μž‘μ„±(complete rewrite)ν•˜λŠ” 것은 λ¦¬μŠ€ν¬κ°€ λ„ˆλ¬΄ ν½λ‹ˆλ‹€ [3]. * λŒ€μ‹  ν•œ λ²ˆμ— ν•˜λ‚˜μ˜ μŠ€ν† μ–΄μ”© λ‹¨κ³„μ μœΌλ‘œ μ΄λ™ν•˜λŠ” 방식이 ꢌμž₯λ©λ‹ˆλ‹€ [3]. * 예λ₯Ό λ“€μ–΄, μ•Œλ¦Ό(notifications) κΈ°λŠ₯κ³Ό 같은 κ°„λ‹¨ν•œ μœ ν‹Έλ¦¬ν‹° μ˜μ—­λΆ€ν„° λ§ˆμ΄κ·Έλ ˆμ΄μ…˜μ„ μ‹œμž‘ν•˜μ—¬, μ μ§„μ μœΌλ‘œ 결제 흐름(checkout flow)κ³Ό 같은 더 λ³΅μž‘ν•œ λ„λ©”μΈμœΌλ‘œ ν™•μž₯ν•΄ λ‚˜κ°‘λ‹ˆλ‹€ [3]. * "μž¬μž‘μ„±ν•˜μ§€ 말고 λ¦¬νŒ©ν† λ§ν•˜λΌ(refactor, do not rewrite)"λŠ” 철학을 μ§€ν‚΄μœΌλ‘œμ¨, ν”„λ‘ νŠΈμ—”λ“œ μ•„ν‚€ν…μ²˜λ₯Ό ν˜„λŒ€ν™”ν•˜λŠ” κ³Όμ • 쀑에도 μƒˆλ‘œμš΄ κΈ°λŠ₯ κ°œλ°œμ„ 쀑단 없이 지속할 수 μžˆμŠ΅λ‹ˆλ‹€ [3]. ## πŸ”— Knowledge Connections - **Related Topics:** [[Context API]], [[Zustand]], [[Redux]], [[Refactoring Techniques]], [[TanStack Query]] - **Projects/Contexts:** [[Scalable Frontend Systems]], [[Legacy React Codebase Refactoring]] - **Contradictions/Notes:** μ†ŒμŠ€ μ „λ°˜μ—μ„œ κ±°λŒ€ν•œ νŒ€ 규λͺ¨λ‚˜ λ³΅μž‘ν•œ 비동기 둜직 ν†΅μ œλ₯Ό μœ„ν•΄μ„œλŠ” Reduxκ°€ 졜적이라고 μ£Όμž₯ν•˜μ§€λ§Œ [6, 7], μ‹€μ œ λ ˆκ±°μ‹œ λ¦¬νŒ©ν† λ§ μ‘°μ–Έμ—μ„œλŠ” 였히렀 비동기 μ„œλ²„ μƒνƒœ 관리λ₯Ό μœ„ν•΄ Redux κ΅¬ν˜„μ„ μ œκ±°ν•˜κ³  TanStack Queryλ₯Ό λ„μž…ν•˜λŠ” 것이 μΆ”μ²œλ˜κΈ°λ„ ν•˜μ—¬ μƒν™©λ³„λ‘œ μƒνƒœ 관리 λΌμ΄λΈŒλŸ¬λ¦¬μ— λŒ€ν•œ μ„ ν˜Έλ„κ°€ 닀름을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€ [4]. --- *Last updated: 2026-04-26*