Search
πŸ€ΉπŸΌβ€β™€οΈ

Module & State Management

πŸ§‘πŸΌβ€πŸš€ Module, State Management μ•Œμ•„μ•Ό ν•˜λŠ” 이유

β—μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μ½”λ“œμ˜ μž¬μ‚¬μš©μ„±μ„ 높이고 μ‹Άλ‹€λ©΄ β—μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ Module둜 κ΅¬λΆ„ν–ˆμ„ λ•Œ λ°μ΄ν„°μ˜ μƒνƒœκ΄€λ¦¬λ₯Ό μΌκ΄€λ˜κ²Œ ν•˜κ³  μ‹Άλ‹€λ©΄

πŸ™‹πŸ»β€β™‚οΈ 이 λ¬Έμ„œλ₯Ό 보고 λ‚˜λ©΄

μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€ λ•Œ λͺ¨λ“ˆ λ‹¨μœ„λ‘œ 뢄리할 수 μžˆλ‹€.
μƒνƒœκ΄€λ¦¬λ₯Ό μœ„ν•΄ κ°€μž₯ μ€‘μš”ν•œ κ°œλ…μΈ 일관성과 μƒνƒœμ ‘κ·Ό λ²”μœ„μ— λŒ€ν•΄ 이야기해볼 수 μžˆλ‹€.

Module

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μ½”λ“œλ₯Ό λ‘œλ“œν•  λ•Œ "λͺ¨λ“  것을 κ³΅μœ ν•˜λŠ”" 방식은 κ°€μž₯ μ—λŸ¬κ°€ λ°œμƒν•˜κΈ° μ‰¬μš΄ 뢀뢄이고 μ–Έμ–΄μ μœΌλ‘œλ„ ν˜Όλž€μŠ€λŸ¬μš΄ λΆ€λΆ„μž…λ‹ˆλ‹€. λ‹€λ₯Έ 언어듀은 μ½”λ“œμ˜ μŠ€μ½”ν”„λ₯Ό μ •μ˜ν•˜κΈ° μœ„ν•΄ νŒ¨ν‚€μ§€ 같은 κ°œλ…μ„ κ°–κ³  μžˆμ§€λ§Œ, ES6 μ΄μ „κΉŒμ§€ μžλ°”μŠ€ν¬λ¦½νŠΈ νŒŒμΌμ— μ •μ˜λœ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λͺ¨λ“  뢀뢄은 ν•˜λ‚˜μ˜ μ „μ—­ μŠ€μ½”ν”„λ₯Ό κ³΅μœ ν–ˆμŠ΅λ‹ˆλ‹€. 그리고 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ λ³΅μž‘ν•΄μ§ˆμˆ˜λ‘ 더 λ§Žμ€ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œλ₯Ό μ‚¬μš©ν•˜κ²Œ λ˜μ—ˆκ³ , μ΄λŸ¬ν•œ 방식은 이름 μΆ©λŒμ΄λ‚˜, λ³΄μ•ˆμƒ μš°λ €λ˜λŠ” λ¬Έμ œλ“€μ„ μΌμœΌμΌ°μŠ΅λ‹ˆλ‹€. ES6의 λͺ©ν‘œ 쀑 ν•˜λ‚˜λŠ” μ΄λŸ¬ν•œ 문제λ₯Ό ν•΄κ²°ν•˜λŠ” κ²ƒμ΄μ—ˆκ³  Module이 λ“±μž₯ν–ˆμŠ΅λ‹ˆλ‹€.
λͺ¨λ“ˆμ€ νŠΉμ • κΈ°λŠ₯을 ν•˜λŠ” ν•˜λ‚˜μ˜ μ½”λ“œ 묢음 λ‹¨μœ„μž…λ‹ˆλ‹€. λͺ¨λ“ˆμ΄ λͺ¨μ—¬ ν•˜λ‚˜μ˜ 큰 ν”„λ‘œκ·Έλž¨μ΄ 되며, λͺ¨λ“ˆμ€ 또 λ‹€λ₯Έ λͺ¨λ“ˆμ˜ μΌλΆ€λ‘œμ„œ κΈ°λŠ₯을 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이런 λͺ¨λ“ˆμ˜ 핡심은 "μΊ‘μŠν™”" μž…λ‹ˆλ‹€. λͺ¨λ“ˆ μ•ˆμ˜ λͺ¨λ“  κΈ°λŠ₯은 λͺ¨λ“ˆ μ•ˆμ—μ„œ λ™μž‘ν•˜λ©°, λͺ¨λ“ˆ λ°–μ—μ„œλŠ” 접근이 ν—ˆμš©λœ μ†μ„±μ΄λ‚˜ λ©”μ„œλ“œλ§Œ μ‚¬μš©ν•  수 μžˆλ„λ‘ ν—ˆμš©λ©λ‹ˆλ‹€. ES5κΉŒμ§€λŠ” λͺ¨λ“ˆμ— λŒ€ν•œ 지원이 λ˜μ§€ μ•Šμ•˜κΈ° λ•Œλ¬Έμ—, λͺ¨λ“ˆκ³Ό λΉ„μŠ·ν•œ ꡬ쑰λ₯Ό μ¦‰μ‹œ μ‹€ν–‰ ν•¨μˆ˜λ₯Ό μ΄μš©ν•΄ κ΅¬ν˜„ν–ˆμŠ΅λ‹ˆλ‹€.
const module = (function() { const _str = "λͺ¨λ“ˆ λ³€μˆ˜" return { myfunc: function() { return _str } } })() console.log(module.myfunc()) // λͺ¨λ“ˆ λ³€μˆ˜
JavaScript
λ°˜ν™˜ 받은 κ°μ²΄λŠ” myfunc λ©”μ„œλ“œλ₯Ό ν˜ΈμΆœν•  수 있고, ν΄λ‘œμ €μ΄κΈ° λ•Œλ¬Έμ— _str λ³€μˆ˜μ— μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ”°λΌμ„œ module.myfunc()λ₯Ό μ‹€ν–‰ν•˜λ©΄ "λͺ¨λ“ˆ λ³€μˆ˜" λ¬Έμžμ—΄μ„ λ°˜ν™˜ λ°›κ²Œ λ©λ‹ˆλ‹€. λͺ¨λ“ˆ μ™ΈλΆ€μ—μ„œλŠ” _str λ³€μˆ˜μ— μ ‘κ·Όν•  수 μ—†μŠ΅λ‹ˆλ‹€.
μ΄λŸ¬ν•œ λ°©μ‹μœΌλ‘œ κ΅¬ν˜„ν•˜λ©° λͺ¨λ“ˆ ν˜•νƒœμ— λŒ€ν•œ λ‹ˆμ¦ˆκ°€ μžˆλ‹€ λ³΄λ‹ˆ, κ²°κ΅­ ES6μ—μ„œλŠ” 본격적으둜 λͺ¨λ“ˆμ„ μ§€μ›ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. (ES6의 λͺ¨λ“ˆμ΄ λ‚˜μ˜€κΈ°κΉŒμ§€ ν‘œμ€€μ„ μœ„ν•œ μ›€μ§μž„μ„ μžμ„Ένžˆ μ•Œμ•„λ³΄κ³  μ‹Άλ‹€λ©΄ 링크λ₯Ό ν™•μΈν•΄μ£Όμ„Έμš”!) κ΅¬ν˜„ 방법이 μ‹¬ν”Œν•˜κ³  λͺ…ν™•ν•˜λ―€λ‘œ κ°€λŠ₯ν•˜λ©΄ μœ„μ™€ 같은 λ°©μ‹λ³΄λ‹€λŠ” ES6의 μƒˆλ‘œμš΄ λͺ¨λ“ˆ μž‘μ„± 방법을 μΆ”μ²œν•˜λŠ”λ°μš”. ES6μ—μ„œ μƒˆλ‘­κ²Œ μ§€μ›ν•˜λŠ” λͺ¨λ“ˆ μ‹œμŠ€ν…œμ€ λ‹€μŒμ˜ κ·œμΉ™μ— 따라 μž‘μ„±ν•©λ‹ˆλ‹€.
βœ… λͺ¨λ“ˆμ€ 파일 λ‹¨μœ„λ‘œ κ΅¬μ„±ν•˜λŠ” κ±Έ 기본으둜 ν•œλ‹€. ν•˜μ§€λ§Œ κ°„λ‹¨ν•œ λ©”μ„œλ“œ ν˜•νƒœμΈ λͺ¨λ“ˆλ“€μΈ 경우 ν•œ 개의 νŒŒμΌμ—μ„œ κ΄€λ¦¬ν•˜κΈ°λ„ ν•œλ‹€. βœ… λͺ¨λ“ˆμ˜ λ³€μˆ˜, ν•¨μˆ˜, 클래슀 등은 export ν‚€μ›Œλ“œλ‘œ λ…ΈμΆœν•˜κ³  import둜 λ‹€λ₯Έ λͺ¨λ“ˆ, νŽ˜μ΄μ§€μ—μ„œ κ°€μ Έμ™€μ„œ μ‚¬μš©ν•œλ‹€. βœ… λͺ¨λ“ˆμ€ μˆœν™˜ μ°Έμ‘°λ₯Ό ν•  수 μ—†λ‹€. λͺ¨λ“ˆ μ‹œμŠ€ν…œμ€ 항상 트리 ꡬ쑰둜 맨 μœ„μ— 처음 μ‹€ν–‰λ˜λŠ” 루트 νŽ˜μ΄μ§€/λͺ¨λ“ˆμ΄ 있으며 ν•œ λ°©ν–₯으둜만 μ°Έμ‘°ν•  수 μžˆλ‹€. βœ… λͺ¨λ“ˆμ˜ 이름은 쀑볡될 수 μ—†λ‹€. λ”°λΌμ„œ κ°€μ Έμ˜€λŠ”(import) μ‹œμ μ— 이름을 μž¬μ •μ˜ν•΄ μΆ©λŒμ„ ν”Όν•  수 μžˆλ‹€.

πŸ”₯ μƒνƒœλž€

ν”„λ‘ νŠΈμ—”λ“œ ν”„λ‘œκ·Έλž˜λ°μ„ ν•˜λ©΄μ„œ μƒνƒœ(state)κ΄€λ¦¬λΌλŠ” μš©μ–΄λ₯Ό 많이 μ“°λŠ”λ°μš”. μƒνƒœλž€ μ‰½κ²Œ λ§ν•˜λ©΄ '데이터' 라고 μƒκ°ν•˜λ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€. 이 μƒνƒœ κ΄€λ¦¬λŠ” μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ λ³΅μž‘ν•΄μ§ˆμˆ˜λ‘ 점점 μ–΄λ €μ›Œμ§‘λ‹ˆλ‹€. κ·Έλ ‡κΈ° λ•Œλ¬Έμ— λ‹¨μˆœν•œ κ΅¬μ‘°μΌλ•ŒλΆ€ν„° 이 μƒνƒœλ₯Ό μ–΄λ–»κ²Œ κ΄€λ¦¬ν•˜λ©΄ 쒋을지에 λŒ€ν•œ 고민을 μΆ©λΆ„νžˆ ν•΄λ³΄λŠ” 것은 더 큰 μ–΄ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λ§Œλ“€κΈ° μœ„ν•œ κ³Όμ •μ—μ„œ μ€‘μš”ν•©λ‹ˆλ‹€.
λ¨Όμ € μƒνƒœλž€ λ¬΄μ—‡μΌκΉŒμš”? μƒνƒœκ°€ 있고, μƒνƒœκ°€ μ•„λ‹Œ 것이 μžˆμ„ν…λ°μš”. λ‘˜μ€ μ–΄λ–€ 차이가 μžˆμ„κΉŒμš”? μƒνƒœμ—μ„œ μ€‘μš”ν•œ 뢀뢄은 λ°”λ‘œ 값이 λ³€ν•œλ‹€λŠ” κ²ƒμž…λ‹ˆλ‹€. 이 값이 λ³€ν•˜λŠ”λ° 예츑된 κ°’μœΌλ‘œ λ³€ν•΄μ•Ό μ˜λ„ν•œλŒ€λ‘œ λ™μž‘μ„ μˆ˜ν–‰ν•  수 μžˆμœΌλ‹ˆ, 예츑 λ²”μœ„ μ•ˆμ—μ„œ λ³€ν•˜κ²Œ ν•˜λŠ” 것이 μ€‘μš”ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ κ·Έ 예츑된 λ²”μœ„λ₯Ό λ§Œλ“€κΈ° μœ„ν•΄μ„œ, μ—¬λŸ¬κ°€μ§€ μ œμ•½μ‘°κ±΄μ΄λ‚˜ ꡬ쑰적인 섀계λ₯Ό κ³ λ―Όν•  수 μžˆμŠ΅λ‹ˆλ‹€.
이 예츑 λ²”μœ„λ₯Ό μ΅œμ†Œν™” ν•˜κΈ° μœ„ν•΄μ„œλŠ” μƒνƒœμ— λŒ€ν•΄ μΌκ΄€λ˜κ²Œ READν•˜λŠ” 둜직과, μ΅œμ†Œν™”ν•œ Writeν•˜λŠ” λ‘œμ§μ„ λ§Œλ“€ λ•Œ κ°€λŠ₯ν•΄μ§‘λ‹ˆλ‹€.
λ²”μœ„λ₯Ό μ΅œμ†Œν™”ν•˜λŠ”κ±°λŠ” λͺ¨λ“ˆ λ‹¨μœ„, μŠ€μ½”ν”„ λ‹¨μœ„μ— λŒ€ν•œ 고민으둜 ν™•μž₯될 수 μžˆμŠ΅λ‹ˆλ‹€. μƒνƒœμ— λŒ€ν•œ 일관성은 μƒνƒœλ₯Ό μ—¬λŸ¬ κ³³μ—μ„œ 같은 λ°©μ‹μœΌλ‘œ READν•˜λŠ” 방식을 κ³ λ―Όν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μƒνƒœλ₯Ό μ—¬λŸ¬ κ³³μ—μ„œ μ§μ ‘μ μœΌλ‘œ μˆ˜μ •ν•œλ‹€λ©΄, μƒνƒœλ₯Ό μ˜ˆμΈ‘ν•˜κ³  κ΄€λ¦¬ν•˜κΈ° μ–΄λ €μš°λ‹ˆ μˆ˜μ •ν•˜λŠ” 뢀뢄을 μ œν•œν•˜κ³ , κ·Έ μ±…μž„μ„ 가지고 μžˆλŠ” λŒ€μƒμ΄ λΆ„λͺ…ν•˜κ²Œ 역할을 가진닀면 μ΅œμ†Œν™”ν•œ writeκ°€ κ°€λŠ₯ν•΄μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.
예제λ₯Ό ν†΅ν•΄μ„œ ν”„λ‘ νŠΈμ—”λ“œμ˜ μƒνƒœ 관리에 λŒ€ν•΄ μ•Œμ•„λ³Όν…λ°μš”. μ•„μ£Ό κ°„λ‹¨ν•œ νˆ¬λ‘λ¦¬μŠ€νŠΈλ₯Ό 톡해 μƒνƒœ 관리에 λŒ€ν•΄ 닀뀄볼 μ˜ˆμ •μž…λ‹ˆλ‹€.
μœ„ TodoList 앱은 TodoItemsλΌλŠ” 데이터 값을 κ°€μ§‘λ‹ˆλ‹€. 그런데 이 데이터λ₯Ό μ—¬λŸ¬κ΅°λ°μ—μ„œ κ΄€λ¦¬ν•œλ‹€λ©΄ ν•œ 곳에 λ³€ν™”κ°€ μžˆμ„ λ•Œλ§ˆλ‹€, λͺ¨λ“  λ³€ν™”λ₯Ό κ°μ§€ν•˜κ³  λ°˜μ˜ν•˜λ €λ©΄ 쀑볡 μ½”λ“œλ„ λ§Žμ•„μ§€κ³  λΆˆν•„μš”ν•œ dom μ ‘κ·Ό λ˜ν•œ λ§Žμ•„μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€. κ·Έλ ‡λ‹€λ©΄ 이 데이터λ₯Ό μ–΄λ–»κ²Œ, μ–΄λ””μ„œ κ΄€λ¦¬ν•˜λ©΄ μ’‹μ„κΉŒμš”?
μš°μ„  데이터와 κ΄€λ ¨λœ 뢀뢄듀을 μ²΄ν¬ν•˜κΈ° μœ„ν•΄ μ•žμ˜ λ¬Έμ„œμ—μ„œ λ³΄μ•˜λ˜ κ²ƒμ²˜λŸΌ 데이터λ₯Ό 가지고 κ°±μ‹ λ˜μ•Ό ν•˜λŠ” κΈ°μ€€μœΌλ‘œ UIλ₯Ό λΆ„λ¦¬ν•΄λ³΄κ² μŠ΅λ‹ˆλ‹€.
더 μ„ΈλΆ€μ μœΌλ‘œ 뢄리할 수 도 μžˆμ§€λ§Œ, μš°μ„ μ€ 이 4κ°€μ§€λ‘œ λΆ„λ¦¬ν•΄λ³Όκ±΄λ°μš”. μœ„μ²˜λŸΌ κ΅¬λΆ„ν•˜κ³  λ‚˜λ©΄, TodoAppμ΄λΌλŠ” μ»΄ν¬λ„ŒνŠΈ μ•ˆμ— TodoInput, TodoList, TodoCount UI듀이 ν¬ν•¨λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
μ΄λŸ¬ν•œ κ΅¬μ‘°μ—μ„œ 데이터λ₯Ό 효율적으둜 μ£Όκ³  λ°›κΈ° μœ„ν•΄μ„œλŠ” κ³ λ €ν•΄μ•Όν•  것은 무엇이 μžˆμ„κΉŒμš”? 그리고 데이터λ₯Ό κ³΅μœ ν•˜κΈ° μœ„ν•œ 효율적인 방법은 λ¬΄μ—‡μΌκΉŒμš”? 데이터λ₯Ό κ΄€λ¦¬ν•˜κΈ° μœ„ν•œ 방법듀을 검색해보셔도 μ’‹κ³ , 슀슀둜 κ³ λ―Όν•œ 방법을 직접 κ΅¬ν˜„ν•΄λ΄λ„ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€. μ²˜μŒλΆ€ν„° 잘 λ§Œλ“€μ–΄μ§„ νŒ¨ν„΄λ“€μ„ λ°”λ‘œ μ‚¬μš©ν•˜κΈ° λ³΄λ‹€λŠ” 직접 고민해보고, κ΅¬ν˜„ν•΄λ³΄λŠ” 과정이 μžˆλ‹€λ©΄ μƒˆλ‘œμš΄ 기술과 도ꡬ듀을 λ§Œλ‚¬μ„ λ•Œ κ·Έ 의미λ₯Ό λ”μš± 잘 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ 뢀뢄을 κ³ λ €ν•΄μ„œ 둜또 λ―Έμ…˜μ— λ°˜μ˜ν•΄μ£Όμ„Έμš”.

πŸ’ͺ🏼 μœ„ 예제둜 μ—°μŠ΅ν•΄λ³΄κ³  μ‹Άλ‹€λ©΄!

λ§ν¬μ—μ„œ forkλ°›μ•„ μ €μˆ˜μ€€μ—μ„œλΆ€ν„° μΆ”μƒν™”μ‹œμΌœλ‚˜κ°€λ©° μƒνƒœκ΄€λ¦¬λ₯Ό μ—°μŠ΅ν•΄λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. λ§Œμ•½ μž‘μ„±ν•˜κ³  λ‚œ λ‹€μŒμ—λŠ” PR을 λ³΄λ‚΄λ³΄μ„Έμš”! λˆ„κ΅°κ°€κ°€ μ—¬λŸ¬λΆ„μ˜ PR에 리뷰λ₯Ό λ‚¨κ²¨μ€„κΊΌμ—μš”!

πŸ“˜ 정리

βœ… μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ μƒνƒœ 관리λ₯Ό μœ„ν•΄ μΌκ΄€λ˜κ²Œ, μƒνƒœμ— λŒ€ν•΄ μ ‘κ·Όν•  수 μžˆλŠ” λ²”μœ„λ₯Ό κ³ λ €ν•΄μ•Ό ν•œλ‹€. βœ… λ°”λ‘œ 잘 μ •λ¦¬λœ λ””μžμΈ νŒ¨ν„΄μ΄λ‚˜, 라이브러리λ₯Ό μ°Έκ³ ν•  μˆ˜λ„ μžˆμ§€λ§Œ 슀슀둜 고민해보고 μ°Ύμ•„λ³Έλ‹€λ©΄ κ·ΈλŸ¬ν•œ λ„κ΅¬λ“€μ˜ 철학을 더 잘 이해할 수 있고, 기술의 ν™œμš©λ„λ„ 더 λ†’μ•„μ§ˆ 수 μžˆλ‹€.

πŸ”— μ°Έκ³  링크