FLUX ํŒจํ„ด(Flux pattern)

FLUX ํŒจํ„ด์„ ์•Œ์•„๋ณด์ž

โ˜๏ธ Flux ํŒจํ„ด์ด๋ž€?

  • Flux ํŒจํ„ด์€ MVC์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ๋ชฉ์ ์œผ๋กœ Facebook์—์„œ ๊ณ ์•ˆํ•œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์•„ํ‚คํ…์ฒ˜ ํŒจํ„ด์ด๋‹ค.
  • Dispatcher, Store, View ์„ธ ๋ถ€๋ถ„์œผ๋กœ ๋‚˜๋‰œ๋‹ค.
  • ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์˜ ํŠน์ง•์„ ๊ฐ€์ง„๋‹ค.

๐Ÿ‘Ž MVCํŒจํ„ด์˜ ๋‹จ์ 

์ผ๋ฐ˜์ ์ธ MVC ํŒจํ„ด

[์ผ๋ฐ˜์ ์ธ MVC ํŒจํ„ด]

MVCํŒจํ„ด์˜ ์˜๋„๋Š” ๊ฐ์ž์˜ ์—ญํ• , ๋งก์€๋ฐ”์— ์ง‘์ค‘์„ ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๊ฐœ๋ฐœ์„ ํ•˜์—ฌ ์œ ์ง€๋ณด์ˆ˜์™€ ํ™•์žฅ์„ฑ์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ํŒจํ„ด์ด๋‹ค. ํ•˜์ง€๋งŒ Model๊ณผ View๊ฐ€ ์ถ”๊ฐ€๋ ์ˆ˜๋ก ํ”„๋กœ์ ํŠธ๋Š” ๋ณต์žกํ•ด์ง€๊ณ  ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํž˜๋“ค๊ฒŒ ํ•œ๋‹ค.

๋ณต์žกํ•ด์ง„ MVC ํŒจํ„ด

[๋ณต์žกํ•ด์ง„ MVC ํŒจํ„ด]

์‹ค์ œ ํŽ˜์ด์Šค๋ถ์—์„œ๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๊ทœ๋ชจ๊ฐ€ ์ปค์ง€๊ณ , ๊ตฌ์กฐ๊ฐ€ ๋ณต์žกํ•ด์ ธ ๊ธฐ๋Šฅ์ถ”๊ฐ€ ๋•Œ๋งˆ๋‹ค ํฌ๊ณ  ์ž‘์€ ๋ฌธ์ œ๊ฐ€ ์ƒ๊ฒผ๊ณ , ์ด์— ํŽ˜์ด์Šค๋ถ ๊ฐœ๋ฐœํŒ€์€ FluxํŒจํ„ด์„ ๊ณ ์•ˆํ•˜๊ฒŒ ๋œ๋‹ค.

๐Ÿ‘‰ FluxํŒจํ„ด์˜ ํŠน์ง•

๊ฐ€์žฅ ํฐ ํŠน์ง•์œผ๋กœ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„๋“ค ์ˆ˜ ์žˆ๊ณ  ๋ฐ์ดํ„ฐ๋Š” ํ•ญ์ƒ Dispatcher -> Store -> View ์ˆœ์œผ๋กœ ํ๋ฅด๊ณ  ๋‹ค์‹œ View -> Action -> Dispatcher๋กœ ํ๋ฅธ๋‹ค.

Flux ํŒจํ„ด

๋””์ŠคํŒจ์ฒ˜ (Dispatcher)

๋””์ŠคํŒจ์ฒ˜๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ค‘์•™ ํ—ˆ๋ธŒ๋กœ์จ ๋ชจ๋“  ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ๊ด€๋ฆฌํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค. ์Šคํ† ์–ด์˜ ์ฝœ๋ฐฑ์„ ๋“ฑ๋กํ•˜๋Š”๋ฐ ์“ฐ์ด๊ณ  ๋””์ŠคํŒจ์ฒ˜๋กœ ์ „๋‹ฌ๋œ ์•ก์…˜์„ ์Šคํ† ์–ด์— ์ „๋‹ฌํ•˜๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

์Šคํ† ์–ด (Store)

์Šคํ† ์–ด๋Š” ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  ๋กœ์ง์„ ํฌํ•จํ•œ๋‹ค. MVC์˜ ๋ชจ๋ธ๊ณผ ๋น„์Šทํ•˜์ง€๋งŒ ๋งŽ์€ ๊ฐ์ฒด์˜ ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค. ๋””์ŠคํŒจ์ฒ˜์— ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•˜์—ฌ ๋ฉ”์‹œ์ง€๋ฅผ ์ˆ˜์‹ ํ•˜๊ณ , ์Šคํ† ์–ด๊ฐ€ ๋ณ€๊ฒฝ๋˜๋ฉด ๋ทฐ์— ๋ณ€๊ฒฝ๋‚ด์šฉ์„ ๋ฐ˜์˜ํ•œ๋‹ค.

๋ทฐ (View)

MVC์˜ ๋ทฐ์™€๋Š” ๋‹ฌ๋ฆฌ ํ™”๋ฉด์„ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์€ ๋ฌผ๋ก  ์ปจํŠธ๋กค๋Ÿฌ์˜ ์„ฑ๊ฒฉ๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ตœ์ƒ์œ„์˜ ๋ทฐ๋Š” ์Šคํ† ์–ด์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์ด๋ฅผ ์ž์‹๋ทฐ๋กœ ๋ฐฐ๋ถ„ํ•˜๋Š” ์—ญํ• ์„ ํ•ด Controller-view๋ผ๊ณ ๋„ ๋ถ€๋ฅธ๋‹ค.

์•ก์…˜ (Action)

๋””์ŠคํŒจ์ฒ˜์—์„œ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ํ•  ๋•Œ ๋ฐ์ดํ„ฐ๋ฌถ์Œ์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•˜๋Š”๋ฐ ์ด ๊ฐ์ฒด๋ฅผ Action์ด๋ผ ํ•˜๊ณ  ๋Œ€์ฒด๋กœ ์•ก์…˜์€ ์•ก์…˜์ƒ์„ฑ์ž(Action creator)์—์„œ ๋งŒ๋“ค์–ด์ง„๋‹ค.

Flux ํŒจํ„ด

Thanks to

์ฐธ๊ณ  : Flux

์ฐธ๊ณ  : ์ฝ”๋“œ์“ฐ๋Š”์‚ฌ๋žŒ - Flux์™€ Redux


ยฉ 2019. All rights reserved.