[๊ธฐ์ˆ ๋ฉด์ ‘] Redux

2023. 8. 22. 10:49ใ†๐Ÿ–ฅ๏ธ CS(Computer Science)/์†Œํ”„ํŠธ์›จ์–ด

Redux

: JS application์˜ ์ƒํƒœ๊ด€๋ฆฌ library.


  • Store: apllication์˜ ๋ชจ๋“  ์ƒํƒœ๊ฐ€ ์ €์žฅ๋˜๋Š” ์ค‘์•™ ์ƒํƒœ ์ €์žฅ์†Œ
  • Action: ์ƒํƒœ๋ณ€๊ฒฝ์„ ์œ„ํ•œ ์ด๋ฒคํŠธ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฐ์ฒด
  • Reducer: ํ˜„์žฌ ์ƒํƒœ์™€ ์•ก์…˜์„ ๋ฐ›์•„ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์ˆœ์ˆ˜ํ•œ ํ•จ์ˆ˜
  • Dispatch: ์•ก์…˜์„ ์Šคํ† ์–ด์— ๋ณด๋‚ด ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๋ฉ”์„œ๋“œ

์ž‘๋™๋ฐฉ์‹

  1. action์„ dispatch ํ•˜์—ฌ ์ƒํƒœ๋ณ€๊ฒฝ ์š”์ฒญ
  2. reducer๋Š” ํ˜„์žฌ ์ƒํƒœ์™€ action์„ ์ด์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ์ƒํƒœ ๊ณ„์‚ฐ
  3. store๋Š” ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ , React component์— ์ด๋ฅผ ์ „๋‹ฌํ•˜์—ฌ UI๋ฅผ ์—…๋ฐ์ดํŠธํ•จ.

์žฅ์ 

  • ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ๊ณต์œ  ๋ฐ ์—…๋ฐ์ดํŠธ ์šฉ์ด์„ฑ
  • ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋กœ ๋””๋ฒ„๊น…๊ณผ ํƒœ์ŠคํŒ…์ด ์ˆ˜์›”ํ•จ
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ณต์žก์„ฑ์„ ๊ด€๋ฆฌํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์ƒํƒœ ๊ณต์œ  ๊ฐœ์„