Redux๋กœ์˜ ์นดํˆฐ ์•ˆ๋‚ด์„œ

Tags: JavaScriptReduxFluxReact

October 26, 2015


01

์›๋ฌธ: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

Flux๋ฅผ ๋” ํ˜ผ๋ž€์Šค๋Ÿฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ Flux ๊ทธ ์ž์ฒด๋ณด๋‹ค๋Š” Flux์™€ Flux์—์„œ ์˜๊ฐ์„ ๋ฐ›์•„ ๋งŒ๋“ค์–ด์ง„ Redux๊ฐ„์˜ ์ฐจ์ด์ ์ด๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์ด ๋‘˜์˜ ์ฐจ์ด์ ์— ๊ด€ํ•ด ์„ค๋ช…ํ•  ๊ฒƒ์ด๋‹ค.

Flux์— ๋Œ€ํ•œ ์ด์ „ ๊ธ€์„ ์ฝ์ง€ ์•Š์•˜๋‹ค๋ฉด ์ฝ์„ ๊ฒƒ์„ ์ถ”์ฒœํ•œ๋‹ค.

์™œ Flux๋ฅผ ๋ฐ”๊ฟ”์•ผํ•˜๋‚˜?

Redux๋Š” Flux๊ฐ€ ํ•ด๊ฒฐํ•˜๋Š” ๋ฌธ์ œ์ ์—๋‹ค๊ฐ€ ์ถ”๊ฐ€์ ์ธ ๋ฌธ์ œ์ ์„ ๋” ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

Flux์™€ ๊ฐ™์ด Redux๋„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์ƒํƒœ๋ฅผ ๋”์šฑ ์˜ˆ์ธก ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค. ๋งŒ์•ฝ์— ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์•ก์…˜์„ ๋ฐœ์ƒ์‹œ์ผœ์•ผ ํ•œ๋‹ค. ์ƒํƒœ๋ฅผ ์ €์žฅํ•˜๊ณ  ์žˆ๋Š” ์Šคํ† ์–ด(store)๋Š” ์ ‘๊ทผ์ž(getter)๋งŒ ์žˆ๊ณ  ์„ค์ •์ž(setter)๋Š” ์—†์œผ๋ฏ€๋กœ ์ง์ ‘์ ์œผ๋กœ ์ƒํƒœ๋ฅผ ๋ฐ”๊ฟ€ ๋ฐฉ๋ฒ•์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ด๋Ÿฐ ๊ธฐ๋ณธ์ ์ธ ์ ์€ Flux์™€ Redux๊ฐ€ ์•„์ฃผ ๋น„์Šทํ•˜๋‹ค.

๊ทธ๋Ÿผ ์™œ ๋‹ค๋ฅธ ํŒจํ„ด์ด ํ•„์š”ํ• ๊นŒ? Redux๋ฅผ ๋งŒ๋“  Dan Abramov๋Š” Flux๋ฅผ ๋” ํ–ฅ์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์ฐพ์•„๋ƒˆ๋‹ค. ๊ทธ๋Š” ๋” ๋‚˜์€ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ(developer tool)๋ฅผ ์‚ฌ์šฉํ•˜๊ธธ ์›ํ–ˆ๊ณ , Flux์—์„œ ๋ช‡๋ช‡ ๋ถ€๋ถ„์„ ์กฐ๊ธˆ ๋ฐ”๊พธ๋ฉด ๋” ๋‚˜์€ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์“ธ ์ˆ˜ ์žˆ์œผ๋ฉด์„œ๋„ Flux์™€ ๊ฐ™์€ ์˜ˆ์ธก ๊ฐ€๋Šฅ์„ฑ์„ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค.

๊ทธ๋Š” ํ•ซ ๋ฆฌ๋กœ๋”ฉ(hot reloading)๊ณผ ์‹œ๊ฐ„ ์—ฌํ–‰ ๋””๋ฒ„๊น…(time travel debugging)๋ฅผ ์›ํ–ˆ์ง€๋งŒ(์ด๊ฒƒ์— ๋Œ€ํ•œ ๋˜ ๋‹ค๋ฅธ ๊ธ€์ด ์žˆ๋‹ค), Flux๋กœ ์ฒ˜๋ฆฌํ•˜๊ธฐ์—๋Š” ์–ด๋ ค์šด ๋ช‡๋ช‡ ๋ฌธ์ œ์ ๋“ค์ด ์žˆ์—ˆ๋‹ค.

๋ฌธ์ œ์  1: ์Šคํ† ์–ด์˜ ์ฝ”๋“œ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ์‚ญ์ œํ•˜์ง€ ์•Š๊ณ ๋Š” ๋ฆฌ๋กœ๋”ฉ(reloading)์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค

Flux์—์„œ ์Šคํ† ์–ด(store)๋Š” ๋‹ค์Œ์˜ ๋‘ ๊ฐ€์ง€๋ฅผ ํฌํ•จํ•œ๋‹ค:

  1. ์ƒํƒœ ๋ณ€ํ™˜์„ ์œ„ํ•œ ๋กœ์ง
  2. ํ˜„์žฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ

์Šคํ† ์–ด ๊ฐ์ฒด ํ•˜๋‚˜๊ฐ€ ์ด ๋‘ ๊ฐ€์ง€๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ์€ ํ•ซ ๋ฆฌ๋กœ๋”ฉ์„ ํ•  ๋•Œ ๋ฌธ์ œ์ ์„ ๋งŒ๋“ ๋‹ค. ์ƒˆ๋กœ์šด ์ƒํƒœ ๋ณ€ํ™˜ ๋กœ์ง(state change logic)์„ ์œ„ํ•ด ์Šคํ† ์–ด ๊ฐ์ฒด๋ฅผ ๋ฆฌ๋กœ๋”ฉํ•˜๋ฉด ์Šคํ† ์–ด์— ์ €์žฅ๋˜์–ด์žˆ๋Š” ๊ธฐ์กด์˜ ์ƒํƒœ๊นŒ์ง€ ์žƒ์–ด๋ฒ„๋ฆฌ๋Š” ๋ฐ๋‹ค๊ฐ€ ์Šคํ† ์–ด์™€ ์‹œ์Šคํ…œ์˜ ๋‚˜๋จธ์ง€ ๋ถ€๋ถ„ ์‚ฌ์ด์— ์žˆ๋Š” ์ด๋ฒคํŠธ ๊ตฌ๋…(event subscription)๊นŒ์ง€ ๋ง๊ฐ€์ ธ ๋ฒ„๋ฆฐ๋‹ค.

02

ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

๋‘ ๊ธฐ๋Šฅ์„ ๋ถ„๋ฆฌํ•˜์ž. ํ•œ ๊ฐ์ฒด๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋งŒ์„ ๊ฐ€์ง€๊ฒŒ ํ•˜๊ณ , ์ด ๊ฐ์ฒด๋Š” ๋ฆฌ๋กœ๋”ฉํ•˜์ง€ ์•Š๋„๋ก ํ•˜์ž. ๋˜ ๋‹ค๋ฅธ ๊ฐ์ฒด๋Š” ๋ชจ๋“  ์ƒํƒœ ๋ณ€ํ™˜ ๋กœ์ง์„ ๊ฐ€์ง€๋„๋ก ํ•˜์ž. ์ด ๊ฐ์ฒด๋Š” ์ƒํƒœ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š์œผ๋ฏ€๋กœ ๊ฑฑ์ •์—†์ด ๋ฆฌ๋กœ๋”ฉ ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

03

๋ฌธ์ œ์  2: ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋Š” ๋งค ์•ก์…˜๋งˆ๋‹ค ์žฌ๊ธฐ๋ก๋œ๋‹ค

์‹œ๊ฐ„ ์—ฌํ–‰ ๋””๋ฒ„๊น…์„ ์œ„ํ•ด์„œ๋Š” ์ƒํƒœ ๊ฐ์ฒด์˜ ๋ชจ๋“  ๋ฒ„์ „๋“ค์„ ๊ธฐ๋กํ•ด๋‘์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๊ฑธ ๊ฐ€์ง€๊ณ  ์‰ฝ๊ฒŒ ์ด์ „ ์ƒํƒœ๋กœ ๋Œ์•„๊ฐˆ ์ˆ˜ ์žˆ๋‹ค.

๋งค๋ฒˆ ์ƒํƒœ๊ฐ€ ์ƒˆ๋กœ ๋ฐ”๋€” ๋•Œ๋งˆ๋‹ค ์ด์ „ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ์ƒํƒœ ๊ฐ์ฒด์˜ ๋ฒ„์ „๋“ค์„ ์ €์žฅํ•˜๋Š” ๋ฐฐ์—ด์— ์ถ”๊ฐ€ํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. ํ•˜์ง€๋งŒ JavaScript์˜ ๋™์ž‘๋ฐฉ์‹ ๋•Œ๋ฌธ์— ๋‹จ์ˆœํžˆ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„ ๋ณ€์ˆ˜๋ฅผ ๋ฐฐ์—ด์—๋‹ค๊ฐ€ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ๋งŒ์œผ๋กœ๋Š” ๋ถ€์กฑํ•˜๋‹ค. ์ด ๋ฐฉ์‹์œผ๋กœ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ์˜ ์Šค๋ƒ…์ƒท(snapshot)์„ ์ƒ์„ฑํ•˜๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๊ฐ™์€ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ์ƒˆ๋กœ์šด ํฌ์ธํ„ฐ(pointer)๋ฅผ ๋งŒ๋“ค ๋ฟ์ด๋‹ค.

์ œ๋Œ€๋กœ ๋™์ž‘ํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด์„œ๋Š”, ๊ฐ๊ฐ์˜ ๋ฒ„์ „์ด ์™„๋ฒฝํžˆ ๋…๋ฆฝ๋œ ๊ฐ์ฒด๊ฐ€ ๋  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ์ด์ „ ์ƒํƒœ๋“ค์ด ์‹ค์ˆ˜๋กœ ์ˆ˜์ •๋˜๋Š” ์ผ์€ ์ผ์–ด๋‚˜์ง€ ์•Š์„ ๊ฒƒ์ด๋‹ค.

04

ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

์•ก์…˜์ด ์Šคํ† ์–ด๋กœ ์ „๋‹ฌ๋˜์—ˆ์„๋•Œ ๊ธฐ์กด์˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ์ˆ˜์ •ํ•˜๋Š” ๋Œ€์‹ , ๊ทธ ์ƒํƒœ๋ฅผ ๋ณต์‚ฌํ•œ ๋’ค ๋ณต์‚ฌ๋ณธ์„ ์ˆ˜์ •ํ•˜๋ฉด ๋œ๋‹ค.

05

๋ฌธ์ œ์  3: ์„œ๋“œํŒŒํ‹ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ(third-party plugin)์ด ๋“ค์–ด๊ฐˆ ์ข‹์€ ์žฅ์†Œ๊ฐ€ ์—†๋‹ค

๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋Š” ์—ฌ๋Ÿฌ ๊ณณ์— ์‰ฝ๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค. ์‚ฌ์šฉ์ž๋Š” ์ž์‹ ์˜ ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ ๋„ ๊ฐ„๋‹จํžˆ ์ฝ”๋“œ ๋ช‡ ์ค„์„ ์ง‘์–ด๋„ฃ๋Š” ๊ฒƒ๋งŒ์œผ๋กœ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•œ๋‹ค.

์ด๋ ‡๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ๊ธฐ์กด์˜ ์ฝ”๋“œ์— ์„œ๋“œํŒŒํ‹ฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์†Œ์ธ ํ™•์žฅ์ (extension point)์ด ํ•„์š”ํ•˜๋‹ค.

๊ด€๋ จ ์˜ˆ์ œ ์ค‘ ํ•˜๋‚˜๋กœ๋Š” ๋กœ๊น…(logging)์ด ์žˆ๋‹ค. ๋งค ์•ก์…˜๋งˆ๋‹ค console.log()๋ฅผ ์‹คํ–‰ํ•œ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๋ฉด, ์•ก์…˜์ด ๋“ค์–ด์™”์„ ๋•Œ ๊ทธ ์•ก์…˜์˜ ๊ฒฐ๊ณผ๋กœ์„œ ๋งŒ๋“ค์–ด์ง€๋Š” ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋กœ๊น…ํ•  ๊ฒƒ์ด๋‹ค. Flux์—์„œ๋Š” ๋””์ŠคํŒจ์ณ(dispatcher)์˜ ์—…๋ฐ์ดํŠธ์™€ ๊ฐ ์Šคํ† ์–ด์˜ ์—…๋ฐ์ดํŠธ๋ฅผ ๊ตฌ๋…(subscribe)ํ•ด์•ผ๋งŒ ํ•œ๋‹ค. ํ•˜์ง€๋งŒ ์ด๊ฒƒ์€ ์„œ๋“œํŒŒํ‹ฐ ๋ชจ๋“ˆ(third-party module)์ด ์‰ฝ๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋‹ค.

06

ํ•ด๊ฒฐ๋ฐฉ๋ฒ•

์‹œ์Šคํ…œ์˜ ๋ถ€๋ถ„์„ ๋‹ค๋ฅธ ๊ฐ์ฒด๋“ค๋กœ ์‰ฝ๊ฒŒ ๊ฐ์Œ€ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด๋ณด์ž. ์ด ๊ฐ์ฒด๋“ค์€ ์•ฝ๊ฐ„์˜ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ๋“ค์„ ์‹œ์Šคํ…œ์˜ ๋ถ€๋ถ„์— ์ถ”๊ฐ€ํ•œ๋‹ค. ์ด๋Ÿฐ ํ™•์žฅ์ (extension point)์„ โ€œenhancerโ€ ๋˜๋Š” โ€œhigher orderโ€ ๊ฐ์ฒด ํ˜น์€ ๋ฏธ๋“ค์›จ์–ด(middleware)๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๋˜ํ•œ, ์ƒํƒœ ๋ณ€ํ™˜ ๋กœ์ง(state change logic)์„ ํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ตฌ์กฐํ™”ํ•˜์ž. ์ƒํƒœ๊ฐ€ ๋ณ€ํ–ˆ๋‹ค๋Š” ๊ฒƒ์„ ๋ทฐ์—๊ฒŒ ์•Œ๋ฆฌ๊ธฐ ์œ„ํ•ด ์Šคํ† ์–ด๋Š” ๋‹จ ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ๋งŒ ๋ณด๋‚ด๋ฉด ๋  ๊ฒƒ์ด๋‹ค. ์ด ์ด๋ฒคํŠธ๋Š” ๋ชจ๋“  ์ƒํƒœ ํŠธ๋ฆฌ๊ฐ€ ์ฒ˜๋ฆฌ ๋œ ๋’ค์— ๋ณด๋‚ธ๋‹ค.

07

Note: ์ด๋Ÿฐ ๋ฌธ์ œ์ ๋“ค๊ณผ ํ•ด๊ฒฐ๋ฐฉ๋ฒ•์œผ๋กœ ๊ฐœ๋ฐœ์ž ๋„๊ตฌ ํ™œ์šฉ ์‚ฌ๋ก€๋ฅผ ์ค‘์ ์ ์œผ๋กœ ๋ณด์•˜๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฐ ๋ณ€ํ™”๋“ค์€ ๋‹ค๋ฅธ ํ™œ์šฉ ์‚ฌ๋ก€์—๋„ ๋„์›€์ด ๋œ๋‹ค. ์ด ์™ธ์—๋„ Redux๊ณผ Flux ์‚ฌ์ด์—๋Š” ๋” ๋งŽ์€ ์ฐจ์ด์ ์ด ์žˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, Redux๋Š” ๋ณด์ผ๋Ÿฌํ”Œ๋ ˆ์ดํŠธ(boilerplate)๋ฅผ ์ค„์ด๊ณ  ์Šคํ† ์–ด ๋‚ด์˜ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ ๋‹ค. ์—ฌ๊ธฐ์— Redux์˜ ๋˜ ๋‹ค๋ฅธ ์žฅ์  ๋ฆฌ์ŠคํŠธ๊ฐ€ ์žˆ๋‹ค.

์ƒˆ๋กœ์šด ์บ๋ฆญํ„ฐ๋“ค

Flux์—์„œ Redux๋กœ ์˜ค๋ฉด์„œ ์บ๋ฆญํ„ฐ์˜ ๋ฐฐ์—ญ์ด ์•ฝ๊ฐ„ ๋‹ฌ๋ผ์กŒ๋‹ค.

์•ก์…˜ ์ƒ์„ฑ์ž(action creators)

08

Redux๋Š” Flux์—์„œ ์•ก์…˜ ์ƒ์„ฑ์ž๋ฅผ ๊ทธ๋Œ€๋กœ ๊ฐ€์ ธ์™”๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋ฅผ ๋ฐ”๊พธ๊ณ  ์‹ถ๋‹ค๋ฉด ํ•ญ์ƒ ์•ก์…˜์„ ๋ณด๋‚ด์•ผ๋งŒ ํ•œ๋‹ค. ์ด๊ฒƒ์ด ์ƒํƒœ๋ฅผ ๋ฐ”๊พธ๊ธฐ ์œ„ํ•œ ์œ ์ผํ•œ ๋ฐฉ๋ฒ•์ด๋‹ค.

Flux์— ๋Œ€ํ•œ ์ด์ „ ๊ธ€์—์„œ ์ด์•ผ๊ธฐํ–ˆ๋“ฏ์ด ์•ก์…˜ ์ƒ์„ฑ์ž๋Š” ์ „๋ณด๊ธฐ์‚ฌ(telegraph operator)์™€ ํ•˜๋Š” ์ผ์ด ๋น„์Šทํ•˜๋‹ค. ์–ด๋–ค ๋ฉ”์‹œ์ง€๋ฅผ ๋ณด๋‚ด๊ณ  ์‹ถ์€์ง€ ์•ก์…˜ ์ƒ์„ฑ์ž์—๊ฒŒ ์•Œ๋ ค์ฃผ๋ฉด ๋‚˜๋จธ์ง€ ์‹œ์Šคํ…œ์ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ํฌ๋งท์œผ๋กœ ๋ฐ”๊ฟ”์ค€๋‹ค.

Flux์™€๋Š” ๋‹ค๋ฅด๊ฒŒ Redux์˜ ์•ก์…˜ ์ƒ์„ฑ์ž๋Š” ๋””์ŠคํŒจ์ณ(dispatcher)๋กœ ์•ก์…˜์„ ๋ณด๋‚ด์ง€๋Š” ์•Š๋Š”๋‹ค. ๋Œ€์‹ , ํฌ๋งท์„ ๋ฐ”๊พผ ๋’ค ์•ก์…˜์„ ๋Œ๋ ค์ค€๋‹ค.

์Šคํ† ์–ด(store)

Flux์˜ ์Šคํ† ์–ด๋Š” ๋ชจ๋“  ๊ฒƒ์„ ๊ด€๋ฆฌํ•˜๋Š” ์ •๋ถ€๊ด€๋ฃŒ์™€ ๊ฐ™๋‹ค๊ณ  ์ด์•ผ๊ธฐํ–ˆ์—ˆ๋‹ค. ๋ชจ๋“  ์ƒํƒœ ๋ณ€ํ™”๋Š” ์Šคํ† ์–ด์— ์˜ํ•ด์„œ ์ด๋ฃจ์–ด์ ธ์•ผ ํ•˜๊ณ  ์Šคํ† ์–ด๋กœ ์ง์ ‘ ์š”์ฒญํ•˜๋Š” ๋Œ€์‹  ์•ก์…˜ ํŒŒ์ดํ”„๋ผ์ธ์„ ๋”ฐ๋ผ๊ฐ€์•ผ ํ•œ๋‹ค. Redux์˜ ์Šคํ† ์–ด๋„ ์—ญ์‹œ ๊ฐ™์€ ์—ญํ• ์„ ํ•˜์ง€๋งŒ Flux์˜ ๊ทธ๊ฒƒ๊ณผ๋Š” ์•ฝ๊ฐ„ ๋‹ค๋ฅด๋‹ค.

09

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

๋ฐ˜๋ฉด Redux์˜ ์Šคํ† ์–ด๋Š” ์ข€ ๋” ์ผ์„ ๋‹ค๋ฅธ ๊ณณ์— ์œ„์ž„ํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ์œผ๋ฉฐ, ๊ทธ๋ ‡๊ฒŒ ํ•ด์•ผ๋งŒ ํ•œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด, Redux๋Š” ๋‹จ ํ•˜๋‚˜์˜ ์Šคํ† ์–ด๋งŒ์„ ๊ฐ€์ง€๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๋งŒ์•ฝ ํ˜ผ์ž์„œ ๋ชจ๋“  ๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๋ ค๊ณ  ํ•œ๋‹ค๋ฉด ์•„๋งˆ ์ฒ˜๋ฆฌํ•  ์–‘์ด ๋„ˆ๋ฌด ๋งŽ์„ ๊ฒƒ์ด๋‹ค.

๋Œ€์‹ , Redux์˜ ์Šคํ† ์–ด๋Š” ์ƒํƒœ ํŠธ๋ฆฌ(state tree) ์ „์ฒด๋ฅผ ์œ ์ง€ํ•˜๋Š” ์ฑ…์ž„์„ ์ง„๋‹ค. ์•ก์…˜์ด ๋“ค์–ด์™”์„ ๋•Œ ์–ด๋–ค ์ƒํƒœ๋ณ€ํ™”๊ฐ€ ํ•„์š”ํ•œ์ง€์— ๋Œ€ํ•œ ์ผ์€ ์œ„์ž„ํ•˜๋ฉฐ, ๋ฐ”๋กœ ๋‹ค์Œ์— ์ด์•ผ๊ธฐํ•  ๋ฆฌ๋“€์„œ(reducer)๊ฐ€ ๊ทธ ์ผ์„ ๋งก๋Š”๋‹ค.

์•„๋งˆ ๋””์ŠคํŒจ์ณ(dispatcher)๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์„ ๋ˆˆ์น˜์ฑ˜์„์ง€๋„ ๋ชจ๋ฅธ๋‹ค. ์ด๊ฒƒ์€ ์Šคํ† ์–ด๊ฐ€ ์ด ์ผ์„ ๋„˜๊ฒจ๋ฐ›์•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋ฆฌ๋“€์„œ(the reducers)

์Šคํ† ์–ด๋Š” ์•ก์…˜์ด ์–ด๋–ค ์ƒํƒœ ๋ณ€ํ™”๋ฅผ ๋งŒ๋“œ๋Š”์ง€ ์•Œ ํ•„์š”๊ฐ€ ์žˆ์„ ๋•Œ ๋ฆฌ๋“€์„œ์—๊ฒŒ ๋ฌป๋Š”๋‹ค. ๋ฃจํŠธ ๋ฆฌ๋“€์„œ(root reducer)๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๊ฐ์ฒด์˜ ํ‚ค(key)๋ฅผ ๊ธฐ์ค€ ์‚ผ์•„ ์ƒํƒœ๋ฅผ ์กฐ๊ฐ์กฐ๊ฐ ๋‚˜๋ˆˆ๋‹ค. ์ด๋ ‡๊ฒŒ ๋‚˜๋ˆ„์–ด์ง„ ์ƒํƒœ ์กฐ๊ฐ์€ ๊ทธ ์กฐ๊ฐ์„ ์ฒ˜๋ฆฌํ•  ์ค„ ์•„๋Š” ๋ฆฌ๋“€์„œ๋กœ ๋„˜๊ฒจ์ค€๋‹ค.

10

๋ฆฌ๋“€์„œ๋Š” ๋งˆ์น˜ ์„œ๋ฅ˜ ๋ณต์‚ฌ์— ์ง€๋‚˜์น˜๊ฒŒ ์—ด์„ฑ์ ์ธ ์‚ฌ๋ฌด์‹ค ์ง์›๋“ค๊ณผ ๊ฐ™๋‹ค. ์ผ์„ ๋ง์น˜๋Š” ๊ฒƒ์— ์•„์ฃผ ๋ฏผ๊ฐํ•˜๋ฏ€๋กœ ๋„˜๊ฒจ๋ฐ›์€ ์˜ˆ์ „ ์ƒํƒœ๋Š” ๋ณ€๊ฒฝํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹  ์ƒˆ๋กœ์šด ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“  ํ›„ ๊ฑฐ๊ธฐ์—๋‹ค๊ฐ€ ๋ชจ๋“  ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ์ ์šฉํ•œ๋‹ค.

์ด๊ฒƒ์ด ๋ฐ”๋กœ Redux์˜ ํ‚ค ์•„์ด๋””์–ด ์ค‘ ํ•˜๋‚˜์ด๋‹ค. ์ƒํƒœ ๊ฐ์ฒด๋Š” ์ง์ ‘ ๋ณ€๊ฒฝ๋˜์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹ , ๊ฐ๊ฐ์˜ ์ƒํƒœ ์กฐ๊ฐ์ด ๋ณต์‚ฌ ํ›„ ๋ณ€๊ฒฝ๋˜๊ณ  ์ƒˆ๋กœ์šด ์ƒํƒœ ๊ฐ์ฒด ํ•˜๋‚˜๋กœ ํ•ฉ์ณ์ง„๋‹ค.

๋ฆฌ๋“€์„œ๋Š” ๋ณต์‚ฌ๋˜๊ณ  ์—…๋ฐ์ดํŠธ๋œ ์ƒํƒœ ๊ฐ์ฒด๋ฅผ ๋ฃจํŠธ ๋ฆฌ๋“€์„œ์—๊ฒŒ ๋„˜๊ฒจ์ฃผ๊ณ , ๋ฃจํŠธ ๋ฆฌ๋“€์„œ๋Š” ์ด ๊ฐ์ฒด๋ฅผ ์Šคํ† ์–ด๋กœ ๋ณด๋‚ธ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์Šคํ† ์–ด๋Š” ์ด ๊ฐ์ฒด๋ฅผ ์ƒˆ๋กœ์šด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๋กœ ๋งŒ๋“ ๋‹ค.

๋งŒ์•ฝ ์ž‘์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ผ๋ฉด ํ•˜๋‚˜์˜ ๋ฆฌ๋“€์„œ๋งŒ ๊ฐ€์ง€๊ณ ๋„ ์ „์ฒด ์ƒํƒœ์˜ ๋ณต์‚ฌ๋ณธ์„ ๋งŒ๋“ค๊ณ  ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค. ์•„์ฃผ ํฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด๋ผ๋ฉด, ๋งŽ์€ ๋ฆฌ๋“€์„œ๋ฅผ ๊ฐ€์ง„ ํฐ ๋ฆฌ๋“€์„œ ํŠธ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์ด๊ฒƒ์ด Flux์™€ Redux์˜ ๋˜ ๋‹ค๋ฅธ ์ ์ด๋‹ค. Flux๋Š” ์Šคํ† ์–ด๊ฐ€ ์„œ๋กœ ์—ฐ๊ฒฐ๋  ํ•„์š”๋„ ์—†๊ณ  ์ˆ˜ํ‰์  ๊ตฌ์กฐ๋ฅผ ๊ฐ€์กŒ๋‹ค. ๋ฐ˜๋ฉด Redux๋Š” ๋ฆฌ๋“€์„œ๊ฐ€ ํŠธ๋ฆฌ ๋ชจ์–‘์˜ ๊ณ„๊ธ‰๊ตฌ์กฐ ์•ˆ์— ์กด์žฌํ•œ๋‹ค. ์ด ๊ตฌ์กฐ๋Š” ์ปดํฌ๋„ŒํŠธ ๊ตฌ์กฐ์ฒ˜๋Ÿผ ํ•„์š”ํ•œ ๋งŒํผ์˜ ๋ ˆ๋ฒจ(ํŠธ๋ฆฌ์˜ ๋†’์ด)์„ ์–ผ๋งˆ๋“ ์ง€ ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.

๋ทฐ: ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ์™€ ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ(the views: smart and dumb components)

Flux๋Š” ์ปจํŠธ๋กค๋Ÿฌ ๋ทฐ(controller view)์™€ ์ผ๋ฐ˜ ๋ทฐ(regular view)๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์ปจํŠธ๋กค๋Ÿฌ ๋ทฐ๋Š” ์ค‘๊ฐ„ ๊ด€๋ฆฌ์ž ๊ฐ™์•„์„œ ์Šคํ† ์–ด์™€ ์ž์‹ ๋ทฐ ์‚ฌ์ด์—์„œ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ๊ด€๋ฆฌํ•œ๋‹ค.

11

Redux๋„ ๋น„์Šทํ•œ ์ปจ์…‰์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ์™€ ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๊ทธ๊ฒƒ์ด๋‹ค. ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ด€๋ฆฌ์ž์ฒ˜๋Ÿผ ํ–‰๋™ํ•˜๋Š”๋ฐ, Flux์˜ ์ปจํŠธ๋กค๋Ÿฌ ๋ทฐ๋ณด๋‹ค ๋ช‡๋ช‡ ๊ทœ์น™์„ ๋” ๋”ฐ๋ฅธ๋‹ค.

  • ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ์•ก์…˜ ์ฒ˜๋ฆฌ๋ฅผ ์ฑ…์ž„์ง„๋‹ค. ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ ๋ฐ‘์˜ ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์•ก์…˜์„ ๋ณด๋‚ผ ํ•„์š”๊ฐ€ ์žˆ์„ ๋•Œ, ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” props๋ฅผ ํ†ตํ•ด์„œ ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ์— ํ•จ์ˆ˜๋ฅผ ๋ณด๋‚ธ๋‹ค. ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ฐ›์€ ํ•จ์ˆ˜๋ฅผ ์ฝœ๋ฐฑ์œผ๋กœ์จ ๋‹จ์ˆœํžˆ ํ˜ธ์ถœ๋งŒ ํ•œ๋‹ค.
  • ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž๊ธฐ ์ž์‹ ์˜ CSS style์„ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค.
  • ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž๊ธฐ ์ž์‹ ์˜ DOM์„ ๊ฑฐ์˜ ๊ฐ€์ง€๊ณ  ์žˆ์ง€ ์•Š๋‹ค. ๋Œ€์‹ , DOM ์š”์†Œ๋“ค์„ ๊ด€๋ฆฌํ•˜๋Š” ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๊ด€๋ฆฌํ•œ๋‹ค.

์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ์•ก์…˜์— ์ง์ ‘ ์˜์กด์„ฑ์„ ๊ฐ€์ง€์ง€๋Š” ์•Š๋Š”๋‹ค. ์ด๋Š” ๋ชจ๋“  ์•ก์…˜์„ props๋ฅผย ํ†ตํ•ด์„œ ๋„˜๊ฒจ๋ฐ›๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ด๋ง์ธ ์ฆ‰์Šจ, ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” ๋‹ค๋ฅธ ๋กœ์ง์„ ๊ฐ€์ง„ ๋‹ค๋ฅธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์žฌ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค๋Š” ๋œป์ด๋‹ค. ๋˜ํ•œ ์–ด๋Š์ •๋„ ๋ณด๊ธฐ์ข‹๊ฒŒ ํ• ๋งŒํผ์˜ CSS style๋„ ํฌํ•จํ•˜๊ณ  ์žˆ๋‹ค (๋”ฐ๋กœย style props๋ฅผย ๋ฐ›์•„ ๊ธฐ๋ณธ style์— ๋ณ‘ํ•ฉ์‹œ์ผœ์„œ style์„ ๋ฐ”๊ฟ€์ˆ˜๋„ ์žˆ๋‹ค).

๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ(the view layer binding)

12

์Šคํ† ์–ด๋ฅผ ๋ทฐ์— ์—ฐ๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด์„œ Redux๋Š” ์•ฝ๊ฐ„์˜ ๋„์›€์ด ํ•„์š”ํ•˜๋‹ค. ๊ทธ ๋‘˜์„ ํ•จ๊ป˜ ๋ฌถ์–ด์ค„ ๋ฌด์–ธ๊ฐ€๊ฐ€ ํ•„์š”ํ•œ๋ฐ, ์ด๊ฑธ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์ด๋‹ค. React๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด react-redux๊ฐ€ ๊ทธ๊ฒƒ์ด๋‹ค.

๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์€ ๋ทฐ ํŠธ๋ฆฌ(view tree)๋ฅผ ์œ„ํ•œ IT ๋ถ€์„œ์™€ ๊ฐ™๋‹ค. ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šคํ† ์–ด์— ์—ฐ๊ฒฐํ•˜๋Š” ์—ญํ• ์„ ํ•˜๋ฉฐ, ๋งŽ์€ ๊ธฐ์ˆ ์ ์ธ ์„ธ๋ถ€์‚ฌํ•ญ๋“ค์„ ์ฒ˜๋ฆฌํ•ด์„œ ํŠธ๋ฆฌ ๊ตฌ์กฐ๊ฐ€ ์„ธ๋ถ€์‚ฌํ•ญ์— ์‹ ๊ฒฝ ์“ฐ์ง€ ์•Š๋„๋ก ํ•ด์ค€๋‹ค.

๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์€ ์„ธ ๊ฐœ์˜ ์ปจ์…‰์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค:

  1. ๊ณต๊ธ‰ ์ปดํฌ๋„ŒํŠธ(provider component): ์ปดํฌ๋„ŒํŠธ ํŠธ๋ฆฌ๋ฅผ ๊ฐ์‹ธ๋Š” ์ปดํฌ๋„ŒํŠธ์ด๋‹ค. connect()๋ฅผ ์ด์šฉํ•ด ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ ๋ฐ‘์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ์Šคํ† ์–ด์— ์—ฐ๊ฒฐ๋˜๊ธฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค์–ด์ค€๋‹ค.
  2. connect(): react-redux๊ฐ€ ์ œ๊ณตํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐ›๊ณ  ์‹ถ์œผ๋ฉด connect()๋ฅผ ์ด์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ฃผ๋ฉด ๋œ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด connect()๊ฐ€ ์…€๋ ‰ํ„ฐ(select)๋ฅผ ์ด์šฉํ•ด์„œ ํ•„์š”ํ•œ ๋ชจ๋“  ์—ฐ๊ฒฐ์„ ๋งŒ๋“ค์–ด์ค€๋‹ค.
  3. ์…€๋ ‰ํ„ฐ(selector): ์ง์ ‘ ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ํ•จ์ˆ˜์ด๋‹ค. ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ์•ˆ์˜ ์–ด๋Š ๋ถ€๋ถ„์ด ์ปดํฌ๋„ŒํŠธ์— props๋กœ์จ ํ•„์š”ํ•œ ๊ฒƒ์ธ์ง€ ์ง€์ •ํ•œ๋‹ค.

๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ(the root component)

13

๋ชจ๋“  React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€์ง„๋‹ค. ์ด๊ฒƒ์€ ๋‹จ์ง€ ์ปดํฌ๋„ŒํŠธ ๊ณ„์ธต ๊ตฌ์กฐ์—์„œ ๊ฐ€์žฅ ์œ„์— ์œ„์น˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์ผ ๋ฟ์ด๋‹ค. ํ•˜์ง€๋งŒ Redux์—์„œ๋Š” ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ์ถ”๊ฐ€๋กœ ์ฑ…์ž„์ ธ์•ผ ํ•  ๊ฒƒ์ด ์กด์žฌํ•œ๋‹ค.

๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งก๋Š” ์ž„๋ฌด๋Š” ๋งˆ์น˜ C-level ์ž„์›๊ณผ ๊ฐ™๋‹ค โ€” C-level ์ž„์›์—๋Š” CEO, CTO, CFO ๋“ฑ์ด ์žˆ๋‹ค. ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ชจ๋“  ํŒ€์ด ์ผ์„ ํ•˜๋„๋ก ํ•˜๋Š” ์ž„๋ฌด๋ฅผ ๊ฐ€์ง„๋‹ค. ์Šคํ† ์–ด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ฌด์Šจ ๋ฆฌ๋“€์„œ๋ฅผ ์‚ฌ์šฉํ• ์ง€ ์•Œ๋ ค์ฃผ๋ฉฐ ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ๊ณผ ๋ทฐ๋ฅผ ๋ถˆ๋Ÿฌ์˜จ๋‹ค.

ํ•˜์ง€๋งŒ ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ดˆ๊ธฐํ™”ํ•œ ๋’ค๋กœ๋Š” ๊ฑฐ์˜ ํ•˜๋Š” ์ผ์ด ์—†๋‹ค. ํ™”๋ฉด์„ ๊ฐฑ์‹ ๋„ ๋”๋Š” ์‹ ๊ฒฝ ์“ฐ์ง€ ์•Š๋Š”๋‹ค. ํ™”๋ฉด ๊ฐฑ์‹ ์€ ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์˜ ๋„์›€์œผ๋กœ ์•„๋ž˜์˜ ์ปดํฌ๋„ŒํŠธ๋“ค์ด ๋งก์•„์„œ ์ฒ˜๋ฆฌํ•œ๋‹ค.

์–ด๋–ป๊ฒŒ ํ•จ๊ป˜ ๋™์ž‘ํ•˜๋Š”๊ฐ€

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์–ด๋–ป๊ฒŒ ์ด ์บ๋ฆญํ„ฐ๋“ค์ด ํ•จ๊ป˜ ์ผํ•˜๋Š”์ง€ ์‚ดํŽด๋ณด์ž.

์ค€๋น„(the setup)

์ค€๋น„ ๋‹จ๊ณ„์—์„œ๋Š” ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์—ฌ๋Ÿฌ ๋ถ€๋ถ„์ด ๋ชจ๋‘ ํ•จ๊ป˜ ์—ฐ๊ฒฐ๋œ๋‹ค.

  1. ์Šคํ† ์–ด๋ฅผ ์ค€๋น„ํ•œ๋‹ค.ย ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” createStore()๋ฅผ ์ด์šฉํ•ด์„œ ์Šคํ† ์–ด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๋ฌด์Šจ ๋ฆฌ๋“€์„œ๋ฅผ ์‚ฌ์šฉํ• ์ง€ ์•Œ๋ ค์ค€๋‹ค. ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ์ด๋ฏธ ํ•„์š”ํ•œ ๋ชจ๋“  ๋ฆฌ๋“€์„œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. combineReducers()๋ฅผ ์ด์šฉํ•ด์„œ ๋‹ค์ˆ˜์˜ ๋ฆฌ๋“€์„œ๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ๋Š”๋‹ค. 14
  2. ์Šคํ† ์–ด์™€ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด์˜ ์ปค๋ฎค๋‹ˆ์ผ€์ด์…˜์„ ์ค€๋น„ํ•œ๋‹ค. ๋ฃจํŠธ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ณต๊ธ‰ ์ปดํฌ๋„ŒํŠธ๋กœ ์„œ๋ธŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ๊ณ  ์Šคํ† ์–ด์™€ ๊ณต๊ธ‰ ์ปดํฌ๋„ŒํŠธ ์‚ฌ์ด๋ฅผ ์—ฐ๊ฒฐํ•œ๋‹ค.

    ๊ณต๊ธ‰ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ธฐ ์œ„ํ•œ ๋„คํŠธ์›Œํฌ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” connect()๋กœ ๋„คํŠธ์›Œํฌ์— ์—ฐ๊ฒฐํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ ๋‹ค. 15
  3. ์•ก์…˜ ์ฝœ๋ฐฑ(action callback)์„ ์ค€๋น„ํ•œ๋‹ค. ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์•ก์…˜๊ณผ ์‰ฝ๊ฒŒ ์ผํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์˜๋ฏผํ•œ ์ปดํฌ๋„ŒํŠธ๋Š” bindActionCreators()๋กœ ์•ก์…˜ ์ฝœ๋ฐฑ์„ ์ค€๋น„ํ•œ๋‹ค. ์ด๋ ‡๊ฒŒ ๊ฐ„๋‹จํžˆ ์ฝœ๋ฐฑ์„ ์šฐ์งํ•œ ์ปดํฌ๋„ŒํŠธ์— ๋„˜๊ฒจ์ค„ ์ˆ˜ ์žˆ๋‹ค. ์•ก์…˜์€ ํฌ๋งท์ด ๋ฐ”๋€ ๋’ค ์ž๋™์ ์œผ๋กœ ๋ณด๋‚ด์ง„๋‹ค. 16

๋ฐ์ดํ„ฐ ํ๋ฆ„(the data flow)

์ด์ œ ์‚ฌ์šฉ์ž๊ฐ€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์‚ฌ์šฉํ•  ์ค€๋น„๊ฐ€ ๋˜์—ˆ๋‹ค. ์•ก์…˜์„ ํ•˜๋‚˜ ๋ณด๋‚ด๊ณ  ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ํ™•์ธํ•ด๋ณด์ž.

  1. ๋ทฐ๊ฐ€ ์•ก์…˜์„ ์š”์ฒญํ•œ๋‹ค. ์•ก์…˜ ์ƒ์„ฑ์ž๊ฐ€ ํฌ๋งท์„ ๋ณ€ํ™˜ํ•œ ๋’ค ๋Œ๋ ค์ค€๋‹ค. 17
  2. bindActionCreators()๊ฐ€ ์ค€๋น„๊ณผ์ •์—์„œ ์‚ฌ์šฉ๋˜์—ˆ์œผ๋ฉด ์ž๋™์œผ๋กœ ์•ก์…˜์ด ๋ณด๋‚ด์ง„๋‹ค. ๊ทธ๊ฒŒ ์•„๋‹ˆ๋ผ๋ฉด ๋ทฐ๊ฐ€ ์ง์ ‘ ์•ก์…˜์„ ๋ณด๋‚ธ๋‹ค. 18
  3. ์Šคํ† ์–ด๊ฐ€ ์•ก์…˜์„ ๋ฐ›๋Š”๋‹ค. ํ˜„์žฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ํŠธ๋ฆฌ์™€ ์•ก์…˜์„ ๋ฃจํŠธ ๋ฆฌ๋“€์„œ์—๊ฒŒ ๋ณด๋‚ธ๋‹ค. 19
  4. ๋ฃจํŠธ ๋ฆฌ๋“€์„œ๋Š” ์ƒํƒœ ํŠธ๋ฆฌ๋ฅผ ์กฐ๊ฐ์œผ๋กœ ๋‚˜๋ˆˆ ๋’ค ์•Œ๋งž์€ ์„œ๋ธŒ ๋ฆฌ๋“€์„œ๋กœ ์ƒํƒœ ์กฐ๊ฐ๋“ค์„ ๋„˜๊ฒจ์ค€๋‹ค. 20
  5. ์„œ๋ธŒ ๋ฆฌ๋“€์„œ๋Š” ๋ฐ›์€ ์ƒํƒœ ์กฐ๊ฐ์„ ๋ณต์‚ฌํ•œ ๋’ค, ๊ทธ ๋ณต์‚ฌ๋ณธ์„ ๋ณ€๊ฒฝํ•œ๋‹ค. ๋ฃจํŠธ ๋ฆฌ๋“€์„œ์—๊ฒŒ ๋ณ€๊ฒฝ๋œ ๋ณต์‚ฌ๋ณธ์„ ๋Œ๋ ค์ค€๋‹ค. 21
  6. ๋ชจ๋“  ์„œ๋ธŒ ๋ฆฌ๋“€์„œ๊ฐ€ ๋ณ€๊ฒฝ ๋œ ์ƒํƒœ ์กฐ๊ฐ๋“ค์„ ๋Œ๋ ค์ฃผ๋ฉด, ๋ฃจํŠธ ๋ฆฌ๋“€์„œ๋Š” ์ด ์ƒํƒœ ์กฐ๊ฐ๋“ค์„ ํ•œ๋ฐ ๋ชจ์•„ ์ƒํƒœ ํŠธ๋ฆฌ๋กœ ๋งŒ๋“  ๋’ค ์Šคํ† ์–ด๋กœ ๋Œ๋ ค์ค€๋‹ค. ์Šคํ† ์–ด๋Š” ์ƒˆ๋กœ์šด ์ƒํƒœ ํŠธ๋ฆฌ๋ฅผ ์˜›๋‚  ์ƒํƒœ ํŠธ๋ฆฌ์™€ ๋ฐ”๊พผ๋‹ค. 22
  7. ์Šคํ† ์–ด๋Š” ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์—๊ฒŒ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ๊ฐ€ ๋ณ€๊ฒฝ๋˜์—ˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๋ฆฐ๋‹ค. 23
  8. ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์€ ์Šคํ† ์–ด์—๊ฒŒ ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ๋ณด๋‚ด๋‹ฌ๋ผ๊ณ  ์š”์ฒญํ•œ๋‹ค. 24
  9. ๋ทฐ ๋ ˆ์ด์–ด ๋ฐ”์ธ๋”ฉ์€ ๋ทฐ์—๊ฒŒ ํ™”๋ฉด์„ ์—…๋ฐ์ดํŠธํ•˜๋„๋ก ์š”์ฒญํ•œ๋‹ค. 25

์ด๊ฒƒ์ด ๋‚ด๊ฐ€ ์•Œ๊ณ  ์žˆ๋Š” Redux์ด๊ณ  Flux์™€์˜ ์ฐจ์ด์ ์ด๋‹ค. ๋„์›€์ด ๋˜์—ˆ๊ธธ ๋ฐ”๋ž€๋‹ค!

๊ด€๋ จ์ž๋ฃŒ


ยฉ 2021, Built with Gatsby