synun
๊ฐœ๋ฐœ์‹œ๋„Œ
synun
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (71)
    • javascript (5)
    • react (8)
    • web (1)
    • git (3)
    • aws (1)
    • project (0)
    • ๊ฐœ๋ฐœ์ผ๊ธฐ (36)
    • ํ•ญํ•ด99 (16)
    • ํšŒ๊ณ  (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • framer-motion
  • githubactions
  • password authentication was removed
  • ์ธํ”„์ฝ˜
  • ์ธํ”„๋žฉ
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ํ’€์ด
  • React
  • Algorithm
  • Vite
  • wil
  • TIL
  • react-query
  • javascript
  • CI/CD
  • SSE
  • Selenium
  • fout
  • github actions
  • sipe
  • GIT
  • Howler
  • use-sound
  • howler.js
  • apt-fast
  • life-cycle
  • gh-pages
  • Redux-toolkit
  • ํ•ญํ•ด99
  • json-server
  • ํ•ฉ์„ฑ์ปดํฌ๋„ŒํŠธ

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌ

hELLO ยท Designed By ์ •์ƒ์šฐ.
synun

๊ฐœ๋ฐœ์‹œ๋„Œ

[React] ์นด์šดํ„ฐ๋กœ ์‹œ์ž‘ํ•˜๋Š” Redux
react

[React] ์นด์šดํ„ฐ๋กœ ์‹œ์ž‘ํ•˜๋Š” Redux

2022. 12. 4. 22:39

๐Ÿ‘จ๐Ÿป‍๐Ÿ’ปMVC ํŒจํ„ด๊ณผ FLUX ํŒจํ„ด

์ด๋ ‡๊ฒŒ ์–ด๋ ต๊ณ  ๋ณต์žกํ•œ MVCํŒจํ„ด์˜ ๋ฌธ์ œ์ ์ด์—ˆ๋˜ ์–‘๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ์œผ๋กœ ์ธํ•ด์„œ state์˜ ๊ด€๋ฆฌ์— ์–ด๋ ค์›€์„ ๊ฒช์—ˆ๋‹ค.

๋‹จ๋ฐฉํ–ฅ ๋ฐ”์ธ๋”ฉ์„ ์œ„ํ•ด์„œ FLUXํŒจํ„ด์ด ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค.

View๋Š” MVC ํŒจํ„ด๊ณผ ๋‹ฌ๋ฆฌ ๋ฐ์ดํ„ฐ๋ฅผ ์ง์ ‘ ๋ณ€๊ฒฝ์‹œํ‚ค์ง€ ์•Š๊ณ  Action๋งŒ์„ ๋„˜๊ฒจ์ค€ ํ›„, View์—์„œ ์ด๋ค„์ง„ Action์€ ๋ฐ˜๋“œ์‹œ Dispatcher๋ฅผ ๊ฑฐ์ณ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์„ ์ง„ํ–‰ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์ด ์ด๋ค„์ง„ ์ดํ›„, Store์— ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ณผ์ •์„ ํ†ตํ•ด View๋Š” ๋ณ€๊ฒฝ๋œ ๋ฐ์ดํ„ฐ๋ฅผ Store๋ฅผ ํ†ตํ•ด์„œ ์ „๋‹ฌ๋ฐ›๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์œ„์™€ ๊ฐ™์€ ๊ณผ์ •์„ ํ†ตํ•ด ์ด๋ค„์ง„ ๋ฐ์ดํ„ฐ ๋ณ€๊ฒฝ์€ ๋ทฐ์™€ ๋ชจ๋ธ ์‚ฌ์ด์˜ state ์ „์ด๋ฅผ ๊ฐ„ํŽธํ™”ํ•ด์ฃผ๊ณ  ๊ธฐ์กด์— ํ๋ฆ„์„ ํŒŒ์•…ํ•˜๊ธฐ ์–ด๋ ค์› ๋˜ ๊ด€๋ฆฌ์— ์˜ˆ์ธก์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ์–ด, ๋”์šฑ ํŽธ๋ฆฌํ•œ state ๋ณ€๊ฒฝ ๋ฐฉ๋ฒ•์„ ์ œ์‹œํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.
์œ„์™€ ๊ฐ™์€ ๋ฐฉ์‹์„ ์ฑ„ํƒํ•˜์—ฌ ์ตœ์ข…์ ์œผ๋กœ 2015๋…„์— Dan Abramov์— ์˜ํ•ด์„œ React + Flux์˜ ๊ตฌ์กฐ์— ‘Reducer’๋ฅผ ๊ฒฐํ•ฉํ•œ ‘Redux’๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

 

์ดํ›„์— Flux ํŒจํ„ด์„ ์ด์šฉํ•œ Redux๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ๋Š”๋ฐ, Store, Dispatch, Reducer์— ๋Œ€ํ•œ ๊ฐœ๋…์„ ์ •ํ™•ํ•˜๊ฒŒ ๋‹ค์‹œ ์ •๋ฆฌํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ์กด์— ๋ฐœ์ƒํ•˜๋˜ prop drilling

 

flux ํŒจํ„ด

 

ํ”„๋ก ํŠธ์—”๋“œ๋ผ๋ฉด ๊ผญ ์ฝ์–ด๋ด์•ผํ•  ๋ฐ”์ด๋ธ”๊ฐ™์€ ๊ธ€

 

ํ”„๋ก ํŠธ์—”๋“œ์—์„œ MV* ์•„ํ‚คํ…์ณ๋ž€ ๋ฌด์—‡์ธ๊ฐ€์š”?

MVC, MVVM, MVI ์•„ํ‚คํ…์ณ๊ฐ€ ์–ด์ฉŒ๊ณ  ์ €์ฉŒ๊ณ ... ์†Œํ”„ํŠธ์›จ์–ด๋ฅผ ๊ณต๋ถ€ํ•˜๋‹ค ๋ณด๋ฉด ํ•œ๋ฒˆ์ฏค์€ MV__๋กœ ์‹œ์ž‘๋˜๋Š” ์•„ํ‚คํ…์ณ๋ผ๋Š” ์šฉ์–ด๋ฅผ ๋“ค์–ด๋ณธ์ ์ด ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค. ์‹ค์ œ๋กœ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ์—๋Š” ์ค‘์š”ํ•˜์ง€ ์•Š์•„๋ณด

velog.io

๐Ÿ”์ „์—ญ ์ƒํƒœ๊ด€๋ฆฌ๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 

1. ๋ฆฌ๋•์Šค๋Š” ๋ณต์žกํ•œ State๊ด€๋ฆฌ๋ฅผ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์ฒด๊ณ„๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„๊ตฌ์ด๋‹ค.

2. ๊ตฌ์กฐ๊ฐ€ ๊ฐ„๋‹จํ•œ ๊ฒฝ์šฐ, React๋งŒ์œผ๋กœ๋„ ์ถฉ๋ถ„ํžˆ ๋‹จ๋ฐฉํ–ฅ ๋ฐ์ดํ„ฐ ํ๋ฆ„์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

3. ์›น ๊ตฌ์กฐ์™€ ํ๋ฆ„์„ ํŒŒ์•…ํ•˜๊ณ  ์„ค๊ณ„๊ณผ์ •์—์„œ Redux์˜ ์‚ฌ์šฉ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์„ฑํ•˜๋Š”๋ฐ ๋„์›€์„ ์ค€๋‹ค.

 

์ „์—ญ ์ƒํƒœ๋ฅผ ํ†ตํ•ด์„œ ๋” ๋‚˜์€ ์ปดํฌ๋„ŒํŠธ ์„ค๊ณ„๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“ค๋ฆฌ๋•์Šค ์„ค์น˜ํ•˜๊ธฐ

$ yarn add redux react-redux

react-redux๋Š” redux๋ฅผ react์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

๐Ÿ“‚ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑํ•˜๊ธฐ

src ํด๋” ๋‚ด๋ถ€์— redux ํด๋”๋ฅผ ์ƒ์„ฑํ•ด์ฃผ๊ณ  config, modules ํด๋”๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

 

๊ฒฝ๋กœ์— ๋งž๊ฒŒ js ํŒŒ์ผ์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“redux / config / configStore.js

๐Ÿ“redux / modules / counter.js

 

๊ฐ๊ฐ์˜ ์—ญํ• ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • redux : ๋ฆฌ๋•์Šค์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ๋ฅผ ๋ชจ๋‘ ๋ชจ์•„ ๋†“์„ ํด๋” ์ž…๋‹ˆ๋‹ค.
  • config : ๋ฆฌ๋•์Šค ์„ค์ •๊ณผ ๊ด€๋ จ๋œ ํŒŒ์ผ๋“ค์„ ๋†“์„ ํด๋” ์ž…๋‹ˆ๋‹ค.
  • configStore : “์ค‘์•™ state ๊ด€๋ฆฌ์†Œ" ์ธ Store๋ฅผ ๋งŒ๋“œ๋Š” ์„ค์ • ์ฝ”๋“œ๋“ค์ด ์žˆ๋Š” ํŒŒ์ผ ์ž…๋‹ˆ๋‹ค.
  • modules : ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค State๋“ค์˜ ๊ทธ๋ฃน์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.
    ์˜ˆ๋ฅผ ๋“ค์–ด ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“ ๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด, ํˆฌ๋‘๋ฆฌ์ŠคํŠธ์— ํ•„์š”ํ•œ state๋“ค์ด ๋ชจ๋‘ ๋ชจ์—ฌ์žˆ์„ todos.js๋ฅผ ์ƒ์„ฑํ•˜๊ฒŒ ๋˜ํ…๋ฐ์š”, ์ด todos.js ํŒŒ์ผ์ด ๊ณง ํ•˜๋‚˜์˜ ๋ชจ๋“ˆ์ด ๋ฉ๋‹ˆ๋‹ค.

 

/* ducks ํŒจํ„ด์— ๋Œ€ํ•œ ๊ธ€ */

 

โš™๋ฆฌ๋•์Šค ๊ตฌ์„ฑ์š”์†Œ ์„ธํŒ…ํ•˜๊ธฐ

๐Ÿ“src/configStore.js

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({}); 
const store = createStore(rootReducer); 

export default store;

creatorStore๋Š” ์ €์žฅ์†Œ๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

๋ฆฌ์•กํŠธ ์•ฑ์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋‹ค ๋ณด๋ฉด ์ž์—ฐ์Šค๋ ˆ Reducer๊ฐ€ ๋งŽ์•„์ง‘๋‹ˆ๋‹ค.

๊ทธ ๋•Œ combineReducers๋Š” Reducer๋“ค์„ ํ•˜๋‚˜์˜ ์ƒํƒœ ๊ฐ์ฒด๋กœ ๋งŒ๋“ค์–ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

 

๐Ÿค”createStore์— ๋ฐ‘์ค„์ด ์ƒ๊ฒจ์š”!
createStore๋Š” ๋”์ด์ƒ ์—…๋ฐ์ดํŠธํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. deprecated์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. redux-toolkit ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ ๋Œ€์ฒด๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์ธ๋ฐ์š”.
๋‹น์žฅ์—๋Š” ํฐ ๋ฌธ์ œ๋Š” ์—†๊ธฐ ๋•Œ๋ฌธ์— createStore๋ฅผ ์ด์šฉํ•ด์„œ ์ง„ํ–‰ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.
@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

๐Ÿ“ƒindex.js

import store from "./redux/config/configStore";
import { Provider } from "react-redux";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}> 
    <App />
  </Provider>
);

๋””๋ ‰ํ† ๋ฆฌ ์ตœ์ƒ๋‹จ์˜ index.js ํŒŒ์ผ์— Provider๋กœ App์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ์‹ธ์ค๋‹ˆ๋‹ค.

provider๋Š” store์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก ์—ฐ๋™ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ”ฎ๊ตฌํ˜„ํ•˜๊ธฐ

๋ชจ๋“ˆ ๋งŒ๋“ค๊ธฐ

๐Ÿ“ src/modules/counter.js

// ์ดˆ๊ธฐ ์ƒํƒœ๊ฐ’
const initialState = {
  number: 0,
};

// reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export default counter;

๋ชจ๋“ˆ์˜ ๊ธฐ๋ณธ์ ์ธ ํ˜•ํƒœ๋Š” ์ด๋ ‡๊ฒŒ ์žก์•„๋†“๊ณ  ๊ฐ‘๋‹ˆ๋‹ค.

 

์ดˆ๊ธฐ์ƒํƒœ๊ฐ’์€ useState ์‚ฌ์šฉ์‹œ์— ์ดˆ๊ธฐ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ์ž…๋‹ˆ๋‹ค.

const [count, setCount] = useState(0);

 

๊ฐ์ฒด ํ˜•ํƒœ์ด๋“  ๋ฐฐ์—ด ํ˜•ํƒœ์ด๋“  ์ƒํ™ฉ์— ๋”ฐ๋ผ ํ•„์š”ํ•œ ๊ฐ’์„ ์ž…๋ ฅํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

const initialState = 0;

const initialState = [0];

const initialState = {
  number: 0,
};

 

 

Reducer๋Š” ๋ณ€ํ™”๋ฅผ ์‹œํ‚ค๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค. state hook์—์„œ์˜ setState์˜ ์—ญํ• ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

"ํ•จ์ˆ˜"๋ผ๋Š” ๊ฒƒ์— ์œ ์˜ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

const counter = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

๋ฆฌ๋“€์„œ ๋‚ด๋ถ€์— ๊ฐ๊ฐ์˜ ๋™์ž‘์ธ Action์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฐ‘์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“ˆ ์—ฐ๊ฒฐํ•˜๊ธฐ

๐Ÿ“src/redux/modules/config/configStore.js

import counter from "../modules/counter";

const rootReducer = combineReducers({
  counter: counter, // counter๋งŒ ์จ๋„ ๋จ (ES6)
});

์œ„์—์„œ ์ƒ์„ฑํ•œ ๋ชจ๋“ˆ์„ ์ƒ์„ฑํ•ด๋‘” store์˜ combineReducers์— ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด store์™€ ๋ชจ๋“ˆ์ด ์—ฐ๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

 

Dispatch

๋ฆฌ๋•์Šค๋Š” action -> dispatch -> reducer ์ˆœ์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.

์ˆœ์„œ๋ฅผ ๊ธฐ์–ตํ•˜์‹œ๊ณ , ์•ก์…˜์„ ๋งŒ๋“ค์–ด์„œ Dispatch ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋ฐ‘์—์„œ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

 

UseSelector

store์™€ ๋ชจ๋“ˆ์ด ์—ฐ๊ฒฐ๋์œผ๋ฉด UseSelector๋ผ๋Š” Hook์„ ์ด์šฉํ•ด์„œ store๋ฅผ ์กฐํšŒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‹ค์Œ ์ฝ”๋“œ๋กœ ์กฐํšŒํ•ด๋ด…์‹œ๋‹ค.

 

๐Ÿ“ƒApp.js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  const counterStore = useSelector((state) => state);
 
  return <div>{counterStore}</div>;
}

export default App;

 

+1 ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ

๐Ÿ“src/redux/modules/counter.js

const initialState = {
  number: 0,
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
  }
};

export default counter;

PLUS_ONE ์•ก์…˜์„ Reducer ๋‚ด๋ถ€์— ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

 

import React from "react";
import { useDispatch, useSelector } from "react-redux";

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  return (
    <div>
      {number}
      <button onClick={() => {
        dispatch(({type: "PLUS_ONE"}));
      }}>+ 1</button>
    </div>
  );
};

export default App;

๋ฒ„ํŠผ์„ ๋งŒ๋“ค์–ด์„œ dispatch๋ฅผ onClick ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋กœ ์ „๋‹ฌํ•ด์ค๋‹ˆ๋‹ค.

์ด ๋•Œ dispatch ๋‚ด๋ถ€์— ์ƒ์„ฑํ•ด ์ค€ Action์„ ๊ฐ์ฒด ํ˜•ํƒœ๋กœ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.

๊ฐ’์„ store์—์„œ ์ฝ์–ด์˜ฌ ์ˆ˜ ์žˆ๋„๋ก useSelector๋ฅผ ์ด์šฉํ•ด์„œ state์— ์ €์žฅ๋œ number์„ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹ค.

 

 

 

-1 ๋ฒ„ํŠผ ๋งŒ๋“ค๊ธฐ

+1 ๋ฒ„ํŠผ์„ ๋งŒ๋“  ๊ฒƒ์ฒ˜๋Ÿผ -1์„ ํ•ด์ฃผ๋Š” ๋ฐ˜๋Œ€ ๊ธฐ๋Šฅ๋„ ๋งŒ๋“ค์–ด๋ด…์‹œ๋‹ค.

const counter = (state = initialState, action) => {
  switch (action.type) {
    case "MINUS_ONE":
      return {
        number: state.number - 1,
      };
    case "PLUS_ONE":
      return {
        number: state.number + 1,
      };
    default:
      return state;
  }
};
const App = () => {
	...
  return (
    <div>
      <button onClick={() => {
        dispatch(({type: "MINUS_ONE"}));
      }}>- 1</button>
      {number}
      <button onClick={() => {
        dispatch(({type: "PLUS_ONE"}));
      }}>+ 1</button>
    </div>
  );
};

 

 

 

โž•Action Creator ์ถ”๊ฐ€ํ•˜๊ธฐ

๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ด์œ ๋กœ Action Creator๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

1. ๊ฐ€๋…์„ฑ์˜ ์ฆ๊ฐ€
Action Creator์— Action์„ ๋ชจ์•„ ๋†“์œผ๋ฉด ํ•ด๋‹น ๋ชจ๋“ˆ์ด ๊ฐ€์ง€๊ณ  ์žˆ๋Š” Action์„ ํ•œ๋ฒˆ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

2. ํšจ์œจ์ ์ธ ์œ ์ง€๋ณด์ˆ˜
Action์„ ์ˆ˜์ •ํ•  ์ผ์ด ์ƒ๊ฒผ์„ ๋•Œ ํ•˜๋‚˜ ํ•˜๋‚˜ ์ˆ˜์ •ํ•  ์ผ ์—†์ด Action Creator๋งŒ ์ˆ˜์ •ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

3. ํœด๋จผ ์—๋Ÿฌ ๋ฐฉ์ง€
์ž‘์„ฑํ•œ ํƒ€์ž…์œผ๋กœ ์ž๋™์™„์„ฑ ๊ธฐ๋Šฅ์˜ ๋„์›€ ๋ฐ›์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

Action Creator๋ฅผ ๋งŒ๋“ค์–ด ๋ด…์‹œ๋‹ค.

 

๐Ÿ“ƒcounter.js

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

Action value๋Š” ์ƒ์ˆ˜๋กœ ์„ ์–ธํ•ด์ฃผ๊ณ  (์ƒ์ˆ˜๋Š” ๋Œ€๋ฌธ์ž๋กœ ์ž‘์„ฑํ•˜๋Š” ๊ฒŒ ์—…๊ณ„ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค.)

์„ ์–ธํ•œ ์ƒ์ˆ˜๋ฅผ ์ด์šฉํ•ด์„œ Action Creator๋ฅผ ๋งŒ๋“ค์–ด์ค๋‹ˆ๋‹ค.

Action Creator๋Š” App.js์—์„œ ์‚ฌ์šฉํ•  ์˜ˆ์ •์ด๊ธฐ ๋•Œ๋ฌธ์— export๋ฅผ ๋ถ™์—ฌ์ค๋‹ˆ๋‹ค.

 

๐Ÿ“ƒapp.js

import { minusOne, plusOne } from "./redux/modules/counter";

const App = () => {
	...
  return (
    <div>
      <button onClick={() => {
          dispatch(minusOne());
      }}>
        - 1
      </button>
      {number}
      <button onClick={() => {
        dispatch(plusOne());
      }}>
        + 1
      </button>
    </div>
  );
};

app.js์—์„œ ์ƒ์„ฑํ•œ Action Creator๋“ค์„ importํ•œ ๋‹ค์Œ์—

dispatch ๋ถ€๋ถ„์— ์ž…๋ ฅํ•ด ์‚ฌ์šฉํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.


[์ฐธ๊ณ ]

https://devlog-h.tistory.com/26

https://velog.io/@teo/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%90%EC%84%9C-MV-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94#flux-%ED%8C%A8%ED%84%B4%EA%B3%BC-redux

์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ react ์ˆ™๋ จ์ฃผ์ฐจ ๊ฐ•์˜

'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Vite] vite๋กœ ์ด์œ  ๋ชจ๋ฅด๊ฒŒ ์›น์†Œ์ผ“ ํ†ต์‹ ์ด ์•ˆ๋˜๋Š” ๊ฒฝ์šฐ(ws, sockjs)  (1) 2023.01.05
json-server ์ปค์Šคํ…€ํ•˜๊ธฐ  (0) 2022.12.19
[React] Lifecycle๊ณผ ๋ฉ”์†Œ๋“œ ๊ทธ๋ฆฌ๊ณ  Hook  (0) 2022.12.12
[React] Redux-toolkit ์ž…๋ฌธํ•˜๊ธฐ  (0) 2022.12.10
[React] gh-pages ๋ฐฐํฌํ•˜๊ธฐ  (2) 2022.12.02
    'react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • json-server ์ปค์Šคํ…€ํ•˜๊ธฐ
    • [React] Lifecycle๊ณผ ๋ฉ”์†Œ๋“œ ๊ทธ๋ฆฌ๊ณ  Hook
    • [React] Redux-toolkit ์ž…๋ฌธํ•˜๊ธฐ
    • [React] gh-pages ๋ฐฐํฌํ•˜๊ธฐ
    synun
    synun

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”