[๊ธฐ์ˆ ๋ฉด์ ‘] ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” ์ด์œ ์™€ ๋ฐฉ๋ฒ•.

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

์ƒํƒœ๊ด€๋ฆฌ(State Management)๋ฅผ ์™œ ํ• ๊นŒ??

  • ๋ฐ์ดํ„ฐ๊ด€๋ฆฌ: ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ทœ๋ชจ์— ๋”ฐ๋ผ ๋‹ค๋ฃจ๋Š” ๋ฐ์ดํ„ฐ์™€ ์ •๋ณด๊ฐ€ ์ปค์งˆ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด๋Ÿฌํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ €์žฅํ•˜๊ณ  ์—…๋ฐ์ดํŠธ, ๊ฒ€์ƒ‰ ๋ฐ ๊ด€๋ฆฌํ•˜๊ธฐ์œ„ํ•ด ์ƒํƒœ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค. ๋ฐ์ดํ„ฐ๋ฅผ ์ค‘์•™ ์ง‘์ค‘ํ™”ํ•˜๊ณ , ์ผ๊ด€๋œ ๋ฐฉ์‹์œผ๋กœ ์•ก์„ธ์Šคํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฐ์ดํ„ฐ ๊ณต์œ : ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•ˆ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ ๋ฐ ๋ชจ๋“ˆ ๊ฐ„ ๊ณต์œ ๊ฐ€ ํ•„์š”ํ•  ๋•Œ ์ „์—ญ ์ƒํƒœ๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•˜๊ณ  ์ƒํƒœ ๋ณ€๊ฒฝ ์‹œ ๋‹ค๋ฅธ ๋ถ€๋ถ„์—์ฆ‰์‹œ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ์ถ”์ : ์‚ฌ์šฉ์ž ์ƒํ˜ธ์ž‘์šฉ์— ๋”ฐ๋ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ ๋  ๋•Œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ํ˜„์žฌ ์ƒํƒœ๋ฅผ ์ถ”์ ํ•˜๊ณ  ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ์–ด ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์ด ์ผ๊ด€๋˜๊ณ  ์˜ˆ์ธก ๊ฐ€๋Šฅํ•ด์ง.
  • ๋ณต์žกํ•œ UI ๊ด€๋ฆฌ
  • ์ƒํƒœ์˜ ์ง€์†์„ฑ: ๋กœ๊ทธ์ธ ์ •๋ณด, ์‚ฌ์šฉ์ž ์„ค์ •๋“ฑ์˜ ์ƒํƒœ๋ฅผ ๋ฉ”๋ชจ๋ฆฌ์— ์œ ์ง€๊ฐ€๋Šฅ.
  • ๋””๋ฒ„๊น… ๋ฐ ์œ ์ง€ ๋ณด์ˆ˜
  • ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ ์ง€์›: ์„œ๋กœ ๋‹ค๋ฅธ ํ™˜๊ฒฝ์—์„œ๋„ ์ผ๊ด€๋œ ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ์™€ ๋™์ž‘ ๊ฐ€๋Šฅ.

์ƒํƒœ๊ด€๋ฆฌ ๋ฐฉ๋ฒ•

  • React ๋‚ด์žฅ ์ƒํƒœ๊ด€๋ฆฌ: useState
  • Redux: React์˜ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ชจ๋“  ์ƒํƒœ๋ฅผ ์ค‘์•™ ์ง‘์ค‘ํ™”ํ•˜๊ณ , ์ƒํƒœ ๋ณ€๊ฒฝ์„ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•œ ๋ฐฉ์‹์œผ๋กœ ๊ด€๋ฆฌ๊ฐ€๋Šฅ.
  • ๋น„๋™๊ธฐ ์ƒํƒœ๊ด€๋ฆฌ: Promise or async/await

Reference
chat-gpt