[Redux] Redux๋ฅผ ์ ์ฌ์ฉํด์ผ ํ ๊น? Redux(๋ฆฌ๋์ค)๋?
๐ ๋ค์ด๊ฐ๋ฉฐ
React๋ฅผ ์ฒ์ ํ์ตํ๋ ์์ , Redux๊ฐ ๋ฌด์์ธ์ง, ๊ทธ๋ฆฌ๊ณ ์ ํ์ํ์ง์ ๋ํ ๋ช ํํ ์ดํด ์์ด 'Redux๋ฅผ ์ ๋ฐฐ์์ผ ํ๋์ง'์ ๋ํด ์๋ฌธ์ ๊ฐ๊ณค ํ์ต๋๋ค.
ํ์ง๋ง, React๋ฅผ ์ด์ฉํ์ฌ ํด๋ก ์ฝ๋ฉ์ ํ๊ฑฐ๋ ์ค์ ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ๊ณ ์ ํ๋ ์ปดํฌ๋ํธ๊ฐ ๋ฉ๋ฆฌ ๋จ์ด์ ธ ์์ด ์์ ์ปดํฌ๋ํธ์๊ฒ ๋ถํ์ํ๊ฒ ๋ง์ Props๋ฅผ ์ ๋ฌํด์ผ ํ๋ ์ํฉ(Props Driling)์ ๊ฒช๊ฒ ๋์์ต๋๋ค.
์ด๋ฐ ๊ฒฝํ์ ํตํด "์ ์ญ ์ํ ๊ด๋ฆฌ"์ ํ์์ฑ์ ์ฒด๊ฐํ๊ฒ ๋์์ต๋๋ค.
๊ทธ๋์ ์ด๋ฒ ํฌ์คํ ์์๋ Redux์ ๋ํด ์์๋ณด๋ ค ํฉ๋๋ค.
Redux๋ โ
Redux๋ JavaScript ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ๋ ๋ฐ ๋์์ ์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
Redux๋ React์ ํจ๊ป ์ฌ์ฉ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ง๋ง, Redux์ React๋ ์์ ํ ๋ณ๊ฐ์ ๊ฐ๋ ์ ๋๋ค.
Angular, Vue.js, Vanilla JavaScript ๋ฑ ๋ค๋ฅธ JavaScript ํ๋ ์์ํฌ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
๊ธฐ์กด MVC ํจํด
React์์๋ state๋ฅผ ํตํด ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ ์ ์์ง๋ง, Redux๊ฐ ๋ฑ์ฅํ๊ธฐ ์ ์๋ ํ๋ก ํธ์๋์ ๋ฐ์ดํฐ ํ๋ฆ์ ๊ด๋ฆฌํ๋ ์ฃผ๋ ๋ฐฉ์์ MVC(Model-View-Controller) ํจํด์ด์์ต๋๋ค.
MVC ํจํด์์๋ ๋ฐ์ดํฐ๊ฐ ๋ณ๊ฒฝ๋๋ฉด, ๊ด๋ จ๋ ๋ชจ๋ View, Model, Controller์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ณ , ์ด๋ ๋ฐ์ดํฐ ํ๋ฆ์ ํ์
ํ๊ธฐ ์ด๋ ต๊ฒ ๋ง๋๋ ๋ฌธ์ ๋ฅผ ๋ถ๋ฌ์์ต๋๋ค.
์ด ์์ธ์ '์๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ'๋๋ฌธ์
๋๋ค.
Flux ํจํด ๋ฑ์ฅ
Flux๋ Facebook์ด ๊ฐ๋ฐํ ์ ํ๋ฆฌ์ผ์ด์ ์ํคํ ์ฒ ์ค ํ๋๋ก, ํด๋ผ์ด์ธํธ-์ฌ์ดํธ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ตฌ์ถํ๊ธฐ ์ํ ํจํด์ ๋๋ค.
Flux๋ MVC ํจํด๊ณผ๋ ๋ฌ๋ฆฌ ๋ฐ์ดํฐ๊ฐ ๋จ๋ฐฉํฅ์ผ๋ก ํ๋ฅด๋ ํจํด์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
ํฌ๊ฒ 4๊ฐ์ง ์ฃผ์ ๊ตฌ์ฑ ์์๋ก ์ด๋ฃจ์ด์ ธ ์์ต๋๋ค.
- Action: ๋ฐ์ดํฐ๋ฅผ ๋ด๊ณ ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ๋๋ค. ์ด ๊ฐ์ฒด๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ๋ฐ์ดํฐ๊ฐ ๋ณํํ ๋๋ง๋ค ์์ฑ๋ฉ๋๋ค.
- Dispatcher: ๋ชจ๋ ๋ฐ์ดํฐ ํ๋ฆ์ ๊ด๋ฆฌํ๋ ์ค์ ํ๋ธ ์ญํ ์ ํฉ๋๋ค. Action์ด ๋ฐ์ํ๋ฉด, Dispatcher๋ ์ด๋ฅผ ๋ชจ๋ Store์ ์ ๋ฌํฉ๋๋ค.
- Store: ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ์ ๋ก์ง์ ๊ด๋ฆฌํฉ๋๋ค. MVC์ Model๊ณผ ์ ์ฌํ์ง๋ง, ์ฌ๋ฌ ๊ฐ์ Store๋ฅผ ๊ฐ์ง ์ ์์ผ๋ฉฐ ๊ฐ Store๋ ๋ ๋ฆฝ์ ์ ๋๋ค.
- View: ์ฌ์ฉ์์๊ฒ ๋ณด์ด๋ ๋ถ๋ถ์ผ๋ก, Store์์ ์ํ๋ฅผ ๊ฐ์ ธ์ ๋ ๋๋ง ํฉ๋๋ค. Store์ ์ํ๊ฐ ๋ณ๊ฒฝ๋๋ฉด View๋ ์ด๋ฅผ ๊ฐ์งํ๊ณ ๋ค์ ๋ ๋๋งํฉ๋๋ค.
Flux ํจํด์ ์ด๋ ๊ฒ ๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ์ ํตํด ์ ํ๋ฆฌ์ผ์ด์ ๋ด์์ ๋ฐ์ดํฐ๊ฐ ์ด๋ป๊ฒ ์ฒ๋ฆฌ๋๊ณ ๋ณํํ๋์ง๋ฅผ ๋ช ํํ๊ฒ ํ์ ํ ์ ์๊ฒ ํฉ๋๋ค.
Redux ๋ฑ์ฅ
Redux๋ Flux ํจํด์ ์์ด๋์ด๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํ์ฌ ๊ฐ๋ฐ๋์๊ณ , Flux์ ๋ณต์ก์ฑ์ ์ค์ด๋ฉด์ ๊ฐ๋ฐ์๊ฐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ๋ฅผ ๋ ์ฝ๊ฒ ๊ด๋ฆฌํ ์ ์๋๋ก ๋์์ค๋๋ค.
์ด๋ ๊ฒ, ํ๋ก์ ํธ๊ฐ ์ปค์ง๋ฉด์ ๋ฐ์ดํฐ ํ๋ฆ์ ์ ์ดํ๋ ๊ณผ์ ์ด ๋ณต์กํด์ง๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด, '๋จ๋ฐฉํฅ ๋ฐ์ดํฐ ํ๋ฆ'์ ์ ๊ณตํ๋ Redux๊ฐ ๋ฑ์ฅํ๊ฒ ๋์์ต๋๋ค.
Redux๋ฅผ ์ฌ์ฉํ๋ฉด ์์ ์ปดํฌ๋ํธ์์ ํ์ ์ปดํฌ๋ํธ์ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐ ํ์ํ ๋ถํ์ํ ๋ฆฌ๋ ๋๋ง์ ์ค์ผ ์ ์์ต๋๋ค.
์ด๋ ํนํ ํ๋ก์ ํธ์ ๊ท๋ชจ๊ฐ ์ปค์ง์๋ก ์ฑ๋ฅ์ ํฐ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
์ ๊ทธ๋ฆผ์ ์ผ์ชฝ์ Redux๋ฅผ ์ฌ์ฉํ์ง ์์ ๋, ์ค๋ฅธ์ชฝ์ Redux์ ๊ฐ์ด ๊ฐ๋ฐ์ ํ ๋์ ์ฐจ์ด๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ทธ๋ฆผ์ ๋๋ค.
์๋ฅผ ๋ค์ด, ์ต์์ ์ปดํฌ๋ํธ์์ ๋๊ธ ๋ฐ์ดํฐ๋ฅผ ๊ด๋ฆฌํ๊ณ , ์ด๋ฅผ ํ์ ์ปดํฌ๋ํธ์์ ์ฌ์ฉํ๋ค๊ณ ๊ฐ์ ํด ๋ด ์๋ค.
๋ง์ฝ ๋๊ธ์ด ์ถ๊ฐ๋๊ฑฐ๋ ์ญ์ ๋๋ฉด, ์ด ๋ณ๊ฒฝ์ ์ต์์ ์ปดํฌ๋ํธ๊น์ง ์ ๋ฌํด์ผ ํฉ๋๋ค.
์ด๋ ์ค๊ฐ์ ์์นํ ์ปดํฌ๋ํธ๋ค์๊ฒ ๋ถํ์ํ ๋ ๋๋ง์ ์ด๋ํ๊ณ , ์ปดํฌ๋ํธ์ ์๊ฐ ๋ง์์ง์๋ก ๋ฐ์ดํฐ ๊ด๋ฆฌ๊ฐ ๋ณต์กํด์ง๋๋ค.
ํ์ง๋ง Redux๋ฅผ ์ฌ์ฉํ๋ฉด, ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์์ต๋๋ค.
Redux๋ Redux store๋ฅผ ํตํด ์ ์ญ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ฏ๋ก, ๊ฐ ์ปดํฌ๋ํธ๋ Store์ ์ง์ ์ ๊ทผํ์ฌ ๋ฐ์ดํฐ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.
Redux์ ์ฅ๋จ์ ๐ง
๋ชจ๋ ๋๊ตฌ์ ๊ฐ์ด Redux ์ญ์ ์ฅ๋จ์ ์ด ์์ต๋๋ค.
์ฅ์
- ์ํ๋ฅผ ์ค์์์ ํจ๊ณผ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์์ต๋๋ค.
- ์ํ๋ฅผ ์ด๋์์ ๊ด๋ฆฌํด์ผ ํ ์ง์ ๋ํ ๊ณ ๋ฏผ์ ์ค์ผ ์ ์์ต๋๋ค.
- ์ด๋ค ์ก์ ์ด ์ทจํด์ก๊ณ , ์ด๋ค ๋ฐ์ดํฐ๊ฐ ์ด๋ป๊ฒ ๋ณ๊ฒฝ๋์๋์ง ์ฝ๊ฒ ์ถ์ ํ ์ ์์ต๋๋ค.
๋จ์
- ๋ฌ๋ ์ปค๋ธ๊ฐ ํฝ๋๋ค: Redux๊ฐ๋ ์ ์ตํ๊ธฐ ์ํด์๋ ์๋นํ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ด ํ์ํฉ๋๋ค.
- ๋ฐฉ๋ํ ์ฝ๋์: Redux๋ฅผ ํตํด์ ์์ ๊ธฐ๋ฅ์ ๊ตฌํํ๋๋ฐ๋ ์๋์ ์ผ๋ก ๋ง์ ์ฝ๋๊ฐ ํ์ํฉ๋๋ค.
๐ ๋ง๋ฌด๋ฆฌ
์ด๋ฒ ํฌ์คํ ์์๋ Redux์ ๋ํ ๊ธฐ๋ณธ์ ์ธ ๊ฐ๋ ๊ณผ ์ฌ์ฉ ์ด์ ์ ๋ํด ๊ฐ๋ตํ ์ค๋ช ํด ๋ณด์์ต๋๋ค.
์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ Redux, MobX, Recoil ๋ฑ ๋ค์ํ๋ฉฐ, ์ด๋ค์ ์ ๋๋ก ํ์ฉํ๊ธฐ ์ํด์๋ ๋ฐ์ดํฐ ํ๋ฆ์ ๋ํ ์ดํด๊ฐ ํ์ํฉ๋๋ค.
์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ์ฉ์ ํ์์ ์ธ ๊ฒ์ ์๋๋๋ค.
์์ ํ๋ก์ ํธ์์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ํ๋ก์ ํธ์ ๋ฒ๋ค ํฌ๊ธฐ๋ง ์ฆ๊ฐ์ํฌ ๋ฟ์ ๋๋ค.
๋ฐ๋ผ์, ํ๋ก์ ํธ์ ์๊ตฌ ์ฌํญ๊ณผ ์ํฉ์ ์ ๊ณ ๋ คํ์ฌ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ฌ์ฉ ์ฌ๋ถ๋ฅผ ๊ฒฐ์ ํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
ํจ๊ป ๋ณด๋ฉด ์ข์ ๊ธ
https://yong-nyong.tistory.com/94
[React] ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํ ๊ณ ์ฐฐ (feat. redux-tookit, recoil, zustand, jotai)
๐ ๋ค์ด๊ฐ๋ฉฐ ์ด๋ฒ ํฌ์คํ ์์๋ React์์ ์ฌ์ฉ๋๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋ํด์ ๊ฐ๊ฐ์ ํน์ง๊ณผ ๊ฐ์ธ์ ์ธ ๊ฒฌํด๊ฐ ๋ค์ด๊ฐ ์์ต๋๋ค. ํ์ฌ ํฌ์คํ ์์ ๋ค๋ฃฐ ์ฃผ์ ๋ค ๊ฐ์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. reac
yong-nyong.tistory.com