๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

[Redux] ๋ฆฌ๋•์Šค๋ฅผ ๋ฐฐ์šฐ๊ธฐ ์ „์— ๋ฆฌ๋•์Šค์˜ ํ•„์š”์„ฑ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

by Wonit 2020. 12. 1.

์—ฌ๊ธฐ ๋ฆฌ๋•์Šค๋ฅผ ์™œ ์จ์•ผํ•˜๋Š”์ง€ ์•„์ฃผ ์œ ๋ช…ํ•œ ๊ทธ๋ฆผ์ด ์žˆ๋‹ค.

 

๋ฆฌ๋•์Šค๋Š” Application์˜ ์ƒํƒœ๋ฅผ Globalํ•˜๊ฒŒ ๊ด€๋ฆฌํ•ด์ค€๋‹ค๋Š” State Management Lib์ด๋‹ค.

 

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

 

๊ทธ ๋ฌธ์ œ๋ผ๊ณ  ํ•˜๋ฉด ๋ฐ”๋กœ Local State

Local State

local state๋Š” ์ด๋ฆ„์—์„œ๋„ ์•Œ ์ˆ˜ ์žˆ๋“ฏ Global State์™€ ๋ฐ˜๋Œ€๋˜๋Š” ๋ง์ด๋‹ค.

 

์œ„์˜ ๊ทธ๋ฆผ์—์„œ Without Redux์— ํ™”์‚ดํ‘œ๋กœ ์›€์ง์ด๋Š”๊ฒŒ state์ด๊ณ , ์ด state๋“ค์ด ์•ž๋’ค๋กœ ํ•œ ์นธ์”ฉ๋งŒ ์›€์ง์ผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์ด๊ฒŒ ๋ฐ”๋กœ Local State์ด๋‹ค.

 

์ •ํ™•ํžˆ๋Š” ์ด๊ฒŒ Local State๊ฐ€ ์•„๋‹ˆ๋ผ Local State๋ฅผ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์œ„์˜ ๊ทธ๋ฆผ๊ณผ ๊ฐ™์€ ์ƒํ™ฉ์ด ๋‚˜์˜ค๋Š” ๊ฒƒ์ด๋‹ค.

 

Local State ์ž์ฒด๋กœ๋Š” Component ๋‚ด๋ถ€์— ์žˆ๋Š” State๋ฅผ ๋งํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

 

์•„๋ฌดํŠผ

 

Redux๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด๊ณ  ์ฐพ์•„๋ณด๋Š” ์‚ฌ๋žŒ๋“ค์—๊ฒŒ๋Š” Local State๊ฐ€ ์–ผ๋งˆ๋‚˜ ๋ถˆํŽธํ•˜๊ณ  ์งœ์ฆ๋‚˜๋Š”์ง€ ๋” ์ด์ƒ ์„ค๋ช…ํ•˜์ง€ ์•Š์•„๋„ ์ถฉ๋ถ„ํžˆ ์•Œ ๊ฒƒ ๊ฐ™๋‹ค.

Global State

์œ„์˜ Local State๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์€ ๋ฐ”๋กœ State๋ฅผ Globalํ•˜๊ฒŒ ๋ฐ”๊พธ๋Š” ๊ฒƒ์ด๋‹ค.

 

State๋ฅผ Globalํ•˜๊ฒŒ ๋ฐ”๊พผ๋‹ค๋ฉด, Local State์ฒ˜๋Ÿผ ์•ž ๋’ค๋กœ๋งŒ ์›€์ง์ผ ์ˆ˜ ์žˆ๋Š” state์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์ด๋Ÿฐ Local State๋ฅผ ๋ฐ”๊พธ๊ธฐ ์œ„ํ•œ ๋…ธ๋ ฅ์€ ๋งŽ์•˜๊ณ  Redux๊ฐ€ ํƒ„์ƒํ•˜๊ธฐ ์ „, ํ›„์—๋„ ๋งŽ์€ ๋ฐฉ๋ฒ•์ด ๋‚˜์˜ค๊ณ  ์žˆ๋‹ค.

 

๋Œ€ํ‘œ์ ์œผ๋กœ๋Š”

  • Mobx
  • Context
    ๋“ฑ๋“ฑ์ด ์žˆ์ง€๋งŒ ์ด๋ฒˆ์— ์ด์•ผ๊ธฐ ํ•ด๋ณผ ์ฃผ์ œ๋Š” Redux์ด๋ฏ€๋กœ Redux์— ์ง‘์ค‘ํ•ด๋ณด์ž.

Redux์˜ ์„ธ ๊ฐ€์ง€ ์ฒ ํ•™

๋ฆฌ๋•์Šค์—๋Š” 3๊ฐ€์ง€ ์ฒ ํ•™์ด ์กด์žฌํ•œ๋‹ค.


์ด 3๊ฐ€์ง€ ์ฒ ํ•™์„ ํ™•์‹คํžˆ ์•Œ์•„๋‘ฌ์•ผ ๋‹ค์Œ์— ์ƒˆ๋กœ์šด ๊ฐœ๋…์ด ํ›„๋‘๋‘‘ ์Ÿ์•„์ ธ๋„ ํ”๋“ค๋ฆฌ์ง€ ์•Š๊ณ  ๋‹จ๋‹จํ•˜๊ฒŒ ๋ฟŒ๋ฆฌ๋ฐ•์„ ์ˆ˜ ์žˆ๋‹ค.

 

  1. Single Source of Truth
  2. State is Read-Only
  3. Changes are made with pure functions

Single Source of Truth

์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•ด์„œ ์˜ค์ง ํ•œ๊ฐ€์ง€์˜ ์Šคํ† ์–ด(์ €์žฅ๊ณต๊ฐ„) ์•ˆ์— object tree(๊ฐ์ฒดํŠธ๋ฆฌ)์— ์ €์žฅ๋œ๋‹ค.

 

State is Read-Only

์Šคํ† ์–ด ์•ˆ์— ์ €์žฅ๋œ ์ƒํƒœ๋Š” ์˜ค์ง ์ฝ๊ธฐ ์ „์šฉ์ด๊ณ , ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๋Š”์ง€๋ฅผ ์ •์˜ํ•˜๋Š” ๊ฐ์ฒด์ธ action์— ์˜ํ•ด์„œ๋งŒ ๋ณ€๊ฒฝ๋œ๋‹ค.


๋ฆฌ๋•์Šค์˜ store์— ์ €์žฅ๋œ ์ƒํƒœ๋Š” ์ฝ์„์ˆ˜๋งŒ ์žˆ๊ณ , ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝ์‹œํ‚ค๊ธฐ ์œ„ํ•ด์„œ๋Š” ์•ก์…˜์„ ์ •์˜ํ•ด์„œ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค.

 

Changes are made with pure functions

๋ณ€ํ™”๋Š” ์ˆœ์ˆ˜ํ•œ ํ•จ์ˆ˜๋“ค๋กœ ๋งŒ๋“ค์–ด์ง„๋‹ค.


์œ„์—์„œ ์•ก์…˜์„ ํ˜ธ์ถœํ•ด์•ผ ํ•œ๋‹ค๊ณ  ํ–ˆ๋Š”๋ฐ, ์ด๊ฒŒ ๋ฐ”๋กœ Reducer์ด๋ผ๋Š” ํ•จ์ˆ˜๋‹ค.


์•„์ง ๋ชฐ๋ผ๋„ ์ข‹๋‹ค ๋‹ค์Œ์‹œ๊ฐ„์— ๋” ์ž์„ธํžˆ ๋ฐฐ์šธ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฐ ์ฒ ํ•™์ด๊ตฌ๋‚˜๋งŒ ์•Œ๋ฉด๋œ๋‹ค.

 

Redux๋Š” Redux๋‹ค.

๋ง ๊ทธ๋Œ€๋กœ Redux๋Š” ๋ณ„๊ฐœ๋‹ค.

 

์šฐ๋ฆฌ๋Š” ๊ฑฐ์˜ ๋Œ€๋ถ€๋ถ„ React๋ฅผ ๋ฐฐ์šฐ๋‹ค Redux๋ฅผ ์ ‘ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ๊ทธ์— ๋”ฐ๋ผ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ Redux๋Š” React์˜ ์‚ฐ์œ ๋ฌผ์ด๋ผ๊ณ  ์ƒ๊ฐํ•  ์ˆ˜ ์žˆ์ง€๋งŒ ๊ทธ์™€ ๋ณ„๊ฐœ๋กœ Redux๋Š” Vanilla JS๋‚˜ Vue, Angular์—์„œ๋„ ์‚ฌ์šฉ๋˜๊ธฐ๋„ ํ•œ๋‹ค.

 

Redux๋Š” ๊ธฐ์กด ๊ธฐ์ˆ ๋“ค์˜ ๋ณตํ•ฉ์ ์ธ ์œ ์‚ฐ์ด๋ผ๊ณ ๋„ ํ•œ๋‹ค.

 

Redux๋ฅผ ๊ธฐ์กด ๊ธฐ์ˆ ๋“ค๊ณผ ๋น„๊ตํ•ด๋ณด๋ฉด ์ผ๋ถ€ ํŒจํ„ด์ด๋‚˜ ๊ธฐ์ˆ ์ ์ธ ๋ฉด์—์„œ ๋น„์Šทํ•œ ์ ์ด ์žˆ๊ณ  ๋ณดํ†ต Flux ์•„ํ‚คํ…์ฒ˜์˜ ๊ตฌํ˜„์ด๋ผ๊ณ ๋„ ํ•œ๋‹ค.

 

ํ•˜์ง€๋งŒ Flux์™€๋„ ์ฐจ์ด๊ฐ€ ์žˆ๋Š” ๋ถ€๋ถ„์ด ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ ๋งŽ์€ ๋ถ€๋ถ„ ๋‹ฎ์•„์žˆ๊ธฐ ๋•Œ๋ฌธ์— Flux ์•„ํ‚คํ…์ฒ˜๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.

 

๊ทธ๋ž˜์„œ FLUX์— ๋Œ€ํ•ด์„œ๋„ ์•Œ์•„๋ณด๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ๋ณด์ž.

 


๋ฆฌ๋•์Šค๋Š” ์–ด๋ ต๋‹ค.

 

๋‚ด๊ฐ€ ๊ณต๋ถ€ํ•ด๋ณด๋ฉด์„œ ๋ฆฌ๋•์Šค๊ฐ€ ์‹ซ์–ด Context API๋ฅผ ๊นŠ๊ฒŒ ํŒŒ๊ธฐ๋„ ํ–ˆ๊ณ  ์–ด๋–ป๊ฒŒ๋˜ ๊พธ์—ญ๊พธ์—ญ Context API๋ฅผ ์“ฐ๋ฉด์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ–ˆ์—ˆ๋‹ค.


ํ•˜์ง€๋งŒ ๋ฆฌ๋•์Šค ์—†์ด ๊ณ ํ†ต๋ฐ›์„ ๋ฐ”์— ์ฐจ๋ผ๋ฆฌ ๋ฆฌ๋•์Šค ๋ฐฐ์šฐ๋Š” ๊ณ ํ†ต์ด๋ž‘ ๋ฐ”๊พธ๋ฉด ์–ด๋–จ๊นŒ? ํ•˜๊ณ  ์‹œ์ž‘ํ–ˆ๋˜ ๋ฆฌ๋•์Šค์ธ๋ฐ, ์ง€๊ธˆ์€ ๋‚˜๋ฅผ ๊ณ ํ†ต์œผ๋กœ๋ถ€ํ„ฐ ํ•ด๋ฐฉ์‹œ์ผœ์ฃผ๋Š” ์•„์ฃผ ๊ณ ๋งˆ์šด ์กด์žฌ๊ฐ€ ๋˜์—ˆ๋‹ค.

 

๋‹ค์Œ ์‹œ๊ฐ„๋ถ€ํ„ฐ ๋ฆฌ๋•์Šค์˜ ๊ตฌ์„ฑ ์š”์†Œ์™€ FLUX ์•„ํ‚คํ…์ณ์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

๋Œ“๊ธ€