[๊ธฐ์ˆ ๋ฉด์ ‘] ์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ

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

์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ

: ์ „์ฒด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ์ค‘์•™ ์ง‘์ค‘ํ™”๋œ ๊ณณ์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ํŒจํ„ด/๊ธฐ์ˆ ๋กœ, ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ ํ˜น์€ ๋ชจ๋“ˆ ๊ฐ„์— ๋ฐ์ดํ„ฐ ๊ณต์œ  ๋ฐ ์—…๋ฐ์ดํŠธ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.

์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ ์ฃผ์š” ๋ชฉ์ 

  • ๋ฐ์ดํ„ฐ๊ณต์œ 
  • ์ƒํƒœ์˜ ์ผ๊ด€์„ฑ
  • ์ƒํƒœ ์—…๋ฐ์ดํŠธ ๊ด€๋ฆฌ
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ™•์žฅ์„ฑ: ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ ์ถ”๊ฐ€์‹œ ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ๊ด€๋ฆฌ
  • ๋กœ์ปฌ ์ƒํƒœ์™€์˜ ๊ตฌ๋ถ„: ๋ชจ๋“ˆ๋‚ด๋ถ€์˜ ๋ฐ์ดํ„ฐ์™€ ์ „์—ญ์—์„œ ๊ณต์œ ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌ๋ถ„ํ•˜์—ฌ ๊ด€๋ฆฌ

์ „์—ญ์ƒํƒœ๊ด€๋ฆฌ ์ข…๋ฅ˜

  • Redux
    • ์ค‘์•™ ์ƒํƒœ ์Šคํ† ์–ด, action - reducer pattern์œผ๋กœ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ
    • ์ƒํƒœ์˜ ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•˜๋ฉฐ ์—…๋ฐ์ดํŠธํ•จ
    • ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃฐ ๋•Œ์— redux-thunk ๋“ฑ์˜ ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์‚ฌ์šฉํ•จ
    • Boilerplate ์ฝ”๋“œ๊ฐ€ ์žˆ์Œ
  • Recoil
    • Facebook์—์„œ ๊ฐœ๋ฐœํ•œ React app์„ ์œ„ํ•œ ์ƒํƒœ๊ด€๋ฆฌ library
    • React Hook ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘
    • ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ ์ƒํƒœ๋ฅผ ์ •์˜ํ•˜๊ณ  ์—…๋ฐ์ดํŠธํ•˜์—ฌ ์ง๊ด€์ ์ด๊ณ  ๊ฐ„๋‹จํ•จ
    • ์ƒํƒœ๋ฅผ ์ง์ ‘ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ฝ๊ณ  ์“ธ์ˆ˜ ์žˆ๊ณ , useRecoilState, useRecoilValue ๋“ฑ์˜ ํ›…์œผ๋กœ ์ƒํƒœ๋ฅผ ๋‹ค๋ฃธ
    • ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ ๊ธฐ๋Šฅ์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ œ๊ณต๋จ
    • Boilerplate ์ฝ”๋“œ๋กœ๋ถ€ํ„ฐ ์ž์œ ๋กœ์›€
  • Zustand
    • React Hook ๊ธฐ๋ฐ˜์œผ๋กœ ๋™์ž‘.
    • Boilerplate ์—†์Œ
    • ์ปดํฌ๋„ŒํŠธ ๋‚ด์—์„œ๋งŒ ์ƒํƒœ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ
    • ๋‚ด๋ถ€ Immer๋ผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆ๋ณ€์„ฑ ์œ ์ง€ํ•˜๋ฉฐ ์—…๋ฐ์ดํŠธ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ์ฒ˜๋ฆฌ