๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๊ธฐ์ˆ ๋ฉด์ ‘

3_Redux : mobx : jotai : recoil

๐ŸŒฟ Redux  ์ด์™ธ์— ์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ :  jotai, mobx, recoil ์™€์˜ ์ฐจ์ด๋ฅผ ๊ฐ„๋‹จํžˆ ๋น„๊ตํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 

๐ŸŒฟmobx

Redux ์™€์˜ ์ฐจ์ด์ :
1. ๊ฐ์ฒด ์ง€ํ–ฅ์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ:

MobX๋Š” ๊ฐ์ฒด ์ง€ํ–ฅ์ ์ธ ๋ฐฉ์‹์œผ๋กœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ, ๊ด€์ฐฐ ๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ์ถ”์ ํ•ฉ๋‹ˆ๋‹ค.
2. ๋‹ค์–‘ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ ์ง€์›:

MobX๋Š” React, Vue, Angular ๋“ฑ ๋‹ค์–‘ํ•œ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3. ์ž๋™ ๋ฆฌ๋ Œ๋”๋ง:

MobX๋Š” ์ƒํƒœ ๋ณ€ํ™”๊ฐ€ ๊ฐ์ง€๋˜๋ฉด ์ž๋™์œผ๋กœ ๊ด€๋ จ๋œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ฆฌ๋ Œ๋”๋งํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

๐ŸŒฟ Jotai


Redux ์™€์˜ ์ฐจ์ด์ :
1. ์„ ์–ธ์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ: 

Jotai๋Š” ์„ ์–ธ์ ์ธ ๋ฐฉ์‹์œผ๋กœ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋ฉฐ, React ์ปดํฌ๋„ŒํŠธ์™€ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ†ตํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
2. ์ƒํƒœ ๊ฐฑ์‹  ์ตœ์ ํ™”:

Jotai๋Š” React์˜ ๋ฆฌ๋ Œ๋”๋ง์„ ์ตœ์ ํ™”ํ•˜์—ฌ ํ•„์š”ํ•œ ๊ฒฝ์šฐ์—๋งŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค์‹œ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.
3. ์ฝ”๋“œ ๊ฐ„๊ฒฐ์„ฑ:

Jotai๋Š” ๋‹จ์ˆœํ•œ API๋ฅผ ์ œ๊ณตํ•˜์—ฌ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

๐ŸŒฟRecoil


์ฐจ์ด์ :
1. ์›์ž์  ์ƒํƒœ ๊ด€๋ฆฌ: Recoil์€ ์›์ž์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์ œ๊ณตํ•˜์—ฌ ๊ฐœ๋ณ„ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๊ณ  ์ƒํƒœ์˜ ์˜์กด์„ฑ์„ ์ถ”์ ํ•˜์—ฌ ์ž๋™์œผ๋กœ ์—…๋ฐ์ดํŠธํ•ฉ๋‹ˆ๋‹ค.
2. ์„ ์–ธ์  ์ƒํƒœ ์ •์˜: Recoil์€ ์„ ์–ธ์ ์ธ ๋ฐฉ์‹์œผ๋กœ ์ƒํƒœ๋ฅผ ์ •์˜ํ•˜๊ณ , ์ปดํฌ๋„ŒํŠธ ๊ฐ„์˜ ์ƒํƒœ ๊ณต์œ ๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
3. React์— ํŠนํ™”: Recoil์€ ์ฃผ๋กœ React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.