Input + Output = True

[ํ•ญํ•ด99 - 12์ฃผ์ฐจ] ์‹ค์ „ํ”„๋กœ์ ํŠธ 4 (์ค‘๊ฐ„๋ฐœํ‘œ) ๋ณธ๋ฌธ

๐Ÿ“”๊ฐœ๋ฐœ ์ผ๊ธฐ

[ํ•ญํ•ด99 - 12์ฃผ์ฐจ] ์‹ค์ „ํ”„๋กœ์ ํŠธ 4 (์ค‘๊ฐ„๋ฐœํ‘œ)

IOTrue 2023. 2. 26. 23:37

โš“ ํ•ญํ•ด99 - 12์ฃผ์ฐจ ํšŒ๊ณ ๋ก (์‹ค์ „ํ”„๋กœ์ ํŠธ 4)

 

intro

์ด๋ฒˆ ์ฃผ๋Š” ์‹ค์ „ํ”„๋กœ์ ํŠธ ์ค‘๊ฐ„ ๋ฐœํ‘œ๊ฐ€ ์žˆ์—ˆ๋‹ค.

์šฐ๋ฆฌ ์กฐ๋Š” ์ค‘๊ฐ„ ๋ฐœํ‘œ๊นŒ์ง€ 1์ฐจ ์Šค์ฝ”ํ”„ ์™„๋ฃŒ๋ฅผ ๋ชฉํ‘œ๋กœ ์žก์•˜๊ธฐ ๋•Œ๋ฌธ์—

๋ฐœํ‘œ ๋‹น์ผ ์ƒˆ๋ฒฝ๊นŒ์ง€๋„ ๊ฐ™์ด ์ž‘์—…์„ ํ•˜๊ณ  ์ž ๊น ์ž๊ณ  ์ผ์–ด๋‚˜์„œ ์•ฝ๊ฐ„์˜ ์ˆ˜์ • ํ›„ ๋ฐœํ‘œ์— ์ฐธ์—ฌ ํ–ˆ๋‹ค.

์ค‘๊ฐ„๋ฐœํ‘œ์˜ ๊ฒฐ๋ก ์€, ๊ฐœ๋ฐœ ์†๋„๊ฐ€ ์ข‹๋‹ค๋Š” ์•„์ฃผ ์ข‹์€ ํ‰์„ ๋“ค์—ˆ๋‹ค. ๐Ÿคธ‍โ™‚๏ธ

 

start

์‚ฌ์‹ค, ๋ฐœํ‘œ 2์ผ ์ „์ฏค ๊ฐœ๋ฐœ ๋กœ์ง์ด ์‚ด์ง ๋ฐ”๋€Œ์—ˆ๊ธฐ ๋•Œ๋ฌธ์—

๋ฐ”๋€ ๋‚ด์šฉ๋Œ€๋กœ ์ˆ˜์ •์„ ํ•˜๋А๋ผ 1์ฐจ ์Šค์ฝ”ํ”„ ์™„๋ฃŒ๊นŒ์ง€ ์งง์€ ๊ธฐ๊ฐ„์— ๋งŽ์€ ์‹œ๊ฐ„์„ ๊ฐˆ์•„ ๋„ฃ์—ˆ๋‹ค. ๐Ÿ˜€

์ง€๋‚œ ํšŒ๊ณ ๋ก์—์„œ ์–˜๊ธฐํ–ˆ๋˜ [๋ฐฉ์žฅ๊ณผ ์ฐธ์—ฌ์ž]์˜ ๋ฐฉ ์ž…์žฅ ๋กœ์ง์„

์ƒํƒœ์— ๋”ฐ๋ผ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ–ˆ๋˜ ๋ถ€๋ถ„์ด ๊ณตํ†ต๋œ ์ค‘๊ฐ„ ๋กœ์ง์„ ๊ฑฐ์น˜๊ฒŒ๋” ๋ฐ”๊พธ๋Š” ์ž‘์—…์ด ํ•„์š”ํ–ˆ๊ณ ,

๊ทธ์— ๋”ฐ๋ผ์„œ ์ฝ”๋“œ์˜ ์ถฉ๋Œ์ด ์ผ์–ด๋‚˜์ง€ ์•Š๊ฒŒ ๊ฐœ๋ฐœ ํ•ด์•ผํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์—ˆ๋‹ค.

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—์„œ ํ”„๋ก ํŠธ์—”๋“œ๋Š” ๋ฆฌ์•กํŠธ ์ƒํƒœ๊ด€๋ฆฌ์— zustand๋ฅผ ๋„์ž…ํ–ˆ๊ณ ,

์ด zustand์™€ localstorage๋ฅผ ํ™œ์šฉํ•ด์„œ ์—ฌ๋Ÿฌ ๊ณ ๋ฏผ ๋์— ๋กœ์ง์„ ์™„์„ฑํ–ˆ๋‹ค.

 

์ด์ „ ํ”„๋กœ์ ํŠธ๋“ค์—์„œ๋Š” redux์™€ redux toolkit์„ ์‚ฌ์šฉํ–ˆ๊ธฐ์—

redux์˜ ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ๋Š” ์•Œ๊ณ  ์žˆ์—ˆ๋‹ค.

zustand๋ฅผ ์ฒ˜์Œ ์ ‘ํ•  ๋• ์ด๋Ÿฌํ•œ ๋ณด์ผ๋Ÿฌ ํ”Œ๋ ˆ์ดํŠธ๊ฐ€ ์—†๊ณ , ์‚ฌ์šฉํ•˜๊ธฐ๊ฐ€ ๊ต‰์žฅํžˆ ๊ฐ„๊ฒฐํ•˜๋‹ค๋Š”

๊ธ€๋“ค์„ ๋ดค์—ˆ๊ณ  ์‚ฌ์šฉ๋ฒ•์„ ๋ดค์„ ๋•Œ์—๋„ redux์— ๋น„ํ•ด ๊ต‰์žฅํžˆ ๊ฐ„๊ฒฐํ•ด๋ณด์˜€๋‹ค.

์ด๋ฒˆ์— ๋‹ค์–‘ํ•œ ๋กœ์ง์—์„œ zustand๋ฅผ ์จ๋ณด๋‹ˆ ์ •๋ง ๊ฐ„๊ฒฐ ๊ทธ ์ž์ฒด์˜€๋‹ค.

์ œ์ด์ฟผ๋ฆฌ์˜ ajax์™€ store์˜ ๊ฐ„๊ฒฐํ•œ ํŽธ๋ฆฌ์„ฑ์ด ๊ฒฐํ•ฉ๋œ ๋А๋‚Œ์ด๋ž„๊นŒ.

๋ฌดํŠผ zustand ๋•๋ถ„์— ํ•œ๊ฒฐ ํŽธํ•œ ์ž‘์—…์ด ๊ฐ€๋Šฅํ–ˆ๋‹ค.

์š”์ฆ˜ zustand๊ฐ€ ์ธ๊ธฐ๋ผ๋”๋‹ˆ, ์—ญ์‹œ ์ธ๊ธฐ๊ฐ€ ์žˆ๋Š”๋ฐ์—๋Š” ์ด์œ ๊ฐ€ ์žˆ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.

 

end

๊ทธ๋ฆฌ๊ณ  ์ด์ œ๋Š” 2์ฐจ ์Šค์ฝ”ํ”„ ์™„์„ฑ๊นŒ์ง€ 1์ฃผ์ผ์ด ๋‚จ์•˜๋‹ค.

์ด๊ฑด ์šฐ๋ฆฌ ํŒ€์›๋“ค๋ผ๋ฆฌ ์ž์ฒด์ ์œผ๋กœ ์ •ํ•œ ๋ฐ๋“œ๋ผ์ธ์ด๋‹ค.

์•„์ง ์ถ”๊ฐ€ํ•  ๊ธฐ๋Šฅ๋“ค์ด ๋งŽ๊ณ , ์„œ๋น„์Šค ๋””์ž์ธ์ด ํ•œ ๋ฒˆ ๋” ์—…๋ฐ์ดํŠธ๋  ์˜ˆ์ •์ด๊ธฐ์—

์ด๋ฒˆ ์ฃผ๋„ ์—ญ์‹œ ๋ฐ”์  ๊ฒƒ ๊ฐ™๋‹ค.

 

2์ฐจ ์Šค์ฝ”ํ”„๊นŒ์ง€ ๋˜ ๊ฐ€๋ณด์ž๊ณ ~!

 

 

so many

 

 

 

์ฐธ๊ณ 

 

zustand ๊ณต์‹๋ฌธ์„œ https://github.com/pmndrs/zustand

 

GitHub - pmndrs/zustand: ๐Ÿป Bear necessities for state management in React

๐Ÿป Bear necessities for state management in React. Contribute to pmndrs/zustand development by creating an account on GitHub.

github.com

 

Comments