๐Ÿ“ฑ Cross Platform/React Native

[React Native] Redux๋ž€? (feat. Flux)

Fomagran ๐Ÿ’ป 2022. 8. 3. 01:27
728x90
๋ฐ˜์‘ํ˜•

 

Redux๋ž€?

 

Javascript ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋„์™€์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์ž…๋‹ˆ๋‹ค.

 

์—ฌ๊ธฐ์„œ "์ƒํƒœ?๋Š” ๋ฐ”๋€Œ๋Š” ์–ด๋–ค ๊ฐ’๋“ค์„ ์˜๋ฏธํ•˜๋Š”๋ฐ์š”.

 

์˜ˆ๋ฅผ ๋“ค๋ฉด ๊ณ„์‚ฐ๊ธฐ์—์„œ ์–ด๋–ค ๋ฒ„ํŠผ๋“ค์„ ๋ˆ„๋ฅด๋ฉด ๊ณ„์‚ฐํ•œ ๊ฐ’์ด ๊ณ„์†ํ•ด ๋‹ฌ๋ผ์ง€์ฃ ?

 

๋ฐ”๋กœ ๊ณ„์‚ฐํ•œ ๊ฐ’์ด => ๊ณ„์‚ฐํ•œ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ƒํƒœ์ธ ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

 


Flux๋ž€?

 

Redux๋Š” Facebook์˜ Flux ๋””์ž์ธ ํŒจํ„ด์—์„œ ์œ ๋ž˜๋œ ๊ฒƒ์ธ๋ฐ์š”.

 

Flux๋Š” Web ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์„ MVC ํŒจํ„ด์œผ๋กœ ๊ตฌํ˜„ํ•  ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ณ ์ž ๋งŒ๋“ค์–ด ์กŒ์Šต๋‹ˆ๋‹ค.

 

๊ทธ๋ ‡๋‹ค๋ฉด ์–ด๋– ํ•œ ๋ฌธ์ œ๋“ค์ด ๋ฐœ์ƒํ–ˆ์„๊นŒ์š”?

 

๊ธฐ์กด MVC๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด Model๊ณผ View๊ฐ€ ์–‘๋ฐฉํ–ฅ์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›์•˜์Šต๋‹ˆ๋‹ค.

 

 

ํ•˜์ง€๋งŒ ์•ฑ์ด ์ปค์ง€๋ฉด ์ปค์งˆ์ˆ˜๋ก Model๊ณผ View์˜ ์–‘๋ฐฉํ–ฅ ์†Œํ†ต์ด ๋Š˜์–ด๋‚ฌ๊ณ , ์ด๊ฒƒ์€ ๋ฐ์ดํ„ฐ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ ๋น ๋ฅด๊ฒŒ ์ „ํŒŒํ•˜๊ธฐ๊ฐ€ ํž˜๋“ค์—ˆ์ฃ .

 

 

๊ทธ๋ž˜์„œ ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ณ ์ž ๋‚˜์˜จ ๊ฒƒ์ด ๋ฐ”๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด Flux ๋””์ž์ธ ํŒจํ„ด์ž…๋‹ˆ๋‹ค.

 

์‚ฌ์šฉ์ž๊ฐ€ ์–ด๋–ค Action์„ ์ฃผ๋ฉด => Dispatcher๊ฐ€ ๋ˆˆ์น˜์ฑ„์„œ Action์„ ํ•ด์„ํ•˜๊ณ  =>  Store์— ์ƒํƒœ๋ฅผ ์ €์žฅํ•ด ๋†“์€ ๋’ค => View์— ํ•ด๋‹น ์ƒํƒœ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

 

์ด๋Ÿฌํ•œ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์€ ์œ„์˜ ์–‘๋ฐฉํ–ฅ์œผ๋กœ ๋ณต์žกํ•˜๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์ฃผ๊ณ  ๋ฐ›๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 


Redux(Reducer + Flux)

 

๊ทธ๋ ‡๋‹ค๋ฉฐ ๋‹ค์‹œ Redux๋กœ ๋Œ์•„์™€์„œ Redux๋Š” Flux์—์„œ ์–ด๋–ค ๊ฒƒ๋“ค์ด ๋‹ฌ๋ผ์ง„ ๊ฑธ๊นŒ์š”?

 

๊ธฐ์กด์˜ Flux ๋””์ž์ธ ํŒจํ„ด์— Reducer๋ผ๋Š” ๊ฒƒ์ด ์ถ”๊ฐ€๋œ ๋””์ž์ธ ํŒจํ„ด์„ ์˜๋ฏธํ•˜๋Š”๋ฐ์š”.

 

์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉ์ž์˜ Action์ด ๋ฐœ์ƒํ•˜๋ฉด => Reducer๊ฐ€ Action ๋งž๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜๊ณ  => Store๋Š” ๊ฐ€๊ณต๋œ ๋ฐ์ดํ„ฐ์˜ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  => View์— ๋ฐ˜์˜ํ•ฉ๋‹ˆ๋‹ค.

 

 

 

์ฐจ์ด์ ์„ ๋ณด๋ฉด Flux๋Š” ๋งŽ์€ Store๋ฅผ ๊ฐ€์ง€๊ณ  dispatcher๋ฅผ ์ด์šฉํ•ด ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ์š”.

 

๋ฐ˜๋ฉด Redux๋Š” ํ•œ Store๋ฅผ ๊ฐ€์ง€๊ณ  dispatcher๊ฐ€ ํ•„์š”์—†์œผ๋ฉฐ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค.

 

 

์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†์œผ๋ฉด ์–ด๋–ป๊ฒŒ ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ์„๊นŒ์š”?

 

๋ฐ”๋กœ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์ƒˆ๋กœ์šด ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“ค์–ด ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•œ ๋’ค ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ฐ˜ํ™˜ํ•˜์—ฌ ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ‰๋‹ˆ๋‹ค.


Redux๊ฐ€ ์™œ ํ•„์š”ํ• ๊นŒ?

 

์œ„ Flux์˜ ๋ฌธ์ œ์™€ ๊ฑฐ์˜ ๋™์ผํ•œ๋ฐ์š”.

 

์•„๋ž˜์™€ ๊ฐ™์ด ์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ–ˆ์„ ๋•Œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์ˆ˜ ๋งŽ์€ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ฑฐ์ณ์•ผ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

 

์‰ฝ๊ฒŒ ๋งํ•ด ํ• ๋จธ๋‹ˆ - ์—„๋งˆ - ๋”ธ์ด ์žˆ๋‹ค๊ณ  ํ•˜๋ฉด ํ• ๋จธ๋‹ˆ๊ฐ€ ๋ฐ”๋กœ ์†๋…€ํ•œํ…Œ ์„ ๋ฌผ์„ ์ฃผ๊ณ  ์‹ถ์€๋ฐ, ์—„๋งˆ๋ฅผ ๊ฑฐ์ณ ์†์žํ•œํ…Œ ํ•ญ์ƒ ์ค˜์•ผ ํ•˜๋Š” ๊ฒƒ์ด์ฃ .

 

 

 

 

ํ•˜์ง€๋งŒ Redux๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Action์„ Reducer๋กœ ์ „๋‹ฌํ•˜๊ณ  ๊ฐ€๊ณต๋œ ๋ฐ์ดํ„ฐ๋ฅผ Store์— ์ €์žฅํ•œ ๋’ค ๊ณง ๋ฐ”๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์•ผ ํ•  ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ”์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์œ„ ์˜ˆ์‹œ์™€ ๊ฐ™์ด ํ• ๋จธ๋‹ˆ - ์—„๋งˆ - ๋”ธ์ด ์žˆ๋‹ค๋ฉด ํ• ๋จธ๋‹ˆ๊ฐ€ Store์— ๋งก๊ธฐ๊ธฐ๋งŒ ํ•˜๋ฉด ์†๋…€ํ•œํ…Œ ์ „๋‹ฌ๋˜๋„๋ก ํ•˜๋Š” ๊ฒƒ์ด์ฃ !

 

 

 

์ด์™€ ๊ฐ™์ด ํšจ์œจ์ ์œผ๋กœ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— Redux๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค.

728x90
๋ฐ˜์‘ํ˜•