์ฌ๊ธฐ ๋ฆฌ๋์ค๋ฅผ ์ ์จ์ผํ๋์ง ์์ฃผ ์ ๋ช ํ ๊ทธ๋ฆผ์ด ์๋ค.
๋ฆฌ๋์ค๋ 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๊ฐ์ง ์ฒ ํ์ ํ์คํ ์์๋ฌ์ผ ๋ค์์ ์๋ก์ด ๊ฐ๋
์ด ํ๋๋ ์์์ ธ๋ ํ๋ค๋ฆฌ์ง ์๊ณ ๋จ๋จํ๊ฒ ๋ฟ๋ฆฌ๋ฐ์ ์ ์๋ค.
- Single Source of Truth
- State is Read-Only
- 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 ์ํคํ ์ณ์ ๋ํด์ ์์๋ณด์.
๋๊ธ