\ubcc0\uacbd\uc740 \uc21c\uc218 \ud568\uc218(Pure Functions)\ub97c \ud1b5\ud574 \uc774\ub8e8\uc5b4\uc9d0:<\/strong> \uc0c1\ud0dc \ubcc0\uacbd\uc740 \ub9ac\ub4c0\uc11c\ub77c\ub294 \uc21c\uc218 \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc218\ud589\ub429\ub2c8\ub2e4.<\/li>\n<\/ul>\n2. Redux\uc758 \ud575\uc2ec \uac1c\ub150<\/h2>\n2.1 Store<\/h3>\n
Store\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub97c \uc800\uc7a5\ud558\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4. Store\ub294 \uc0c1\ud0dc\ub97c \uc870\ud68c\ud558\uac70\ub098, \uc561\uc158\uc744 \ub514\uc2a4\ud328\uce58\ud558\uace0, \ub9ac\uc2a4\ub108\ub97c \ub4f1\ub85d\ud558\uc5ec \uc0c1\ud0dc \ubcc0\uacbd\uc744 \uc54c\ub9bc \ubc1b\uc744 \uc218 \uc788\ub294 \uba54\uc11c\ub4dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
2.2 Action<\/h3>\n
Action\uc740 \uc0c1\ud0dc \ubcc0\ud654\uc758 \uc758\ub3c4\ub97c \ub098\ud0c0\ub0b4\ub294 \uac1d\uccb4\uc785\ub2c8\ub2e4. Action \uac1d\uccb4\ub294 ‘type’ \uc18d\uc131\uacfc (\ud544\uc694\uc2dc) ‘payload’\ub97c \ud3ec\ud568\ud558\uc5ec \ub9cc\ub4e4\uc5b4\uc9d1\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uc5c5\ub370\uc774\ud2b8 \ud558\ub294 \uc561\uc158\uc740 \ub2e4\uc74c\uacfc \uac19\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
const updateUserAction = {\n type: 'UPDATE_USER',\n payload: { name: 'John', age: 30 },\n };<\/code><\/pre>\n2.3 Reducer<\/h3>\n
Reducer\ub294 action\uc758 type\uc5d0 \ub530\ub77c \uc0c8\ub85c\uc6b4 \uc0c1\ud0dc\ub97c \ubc18\ud658\ud558\ub294 \uc21c\uc218 \ud568\uc218\uc785\ub2c8\ub2e4. \uc0c1\ud0dc\ub97c \uc5b4\ub5bb\uac8c \ubcc0\uacbd\ud560\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \uad00\ub9ac\ud558\ub294 \uac04\ub2e8\ud55c \ub9ac\ub4c0\uc11c\uc785\ub2c8\ub2e4:<\/p>\n
const userReducer = (state = { name: '', age: 0 }, action) => {\n switch (action.type) {\n case 'UPDATE_USER':\n return {\n ...state,\n ...action.payload,\n };\n default:\n return state;\n }\n };<\/code><\/pre>\n3. Redux Toolkit \uc18c\uac1c<\/h2>\n
Redux Toolkit\uc740 Redux \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub354 \uc27d\uac8c \uc124\uc815\ud558\uace0 \uc791\uc131\ud560 \uc218 \uc788\ub3c4\ub85d \ub3d5\uae30 \uc704\ud574 \ub9cc\ub4e4\uc5b4\uc9c4 \uacf5\uc2dd \ud234\ud0b7\uc785\ub2c8\ub2e4. Redux Toolkit\uc744 \uc0ac\uc6a9\ud558\uba74 \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc\ub97c \uc904\uc774\uace0, \ub354 \uc9c1\uad00\uc801\uc778 API\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Redux Toolkit\uc744 \uc0ac\uc6a9\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uc791\uc5c5\uc744 \uc27d\uac8c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n- \uc0c1\ud0dc, \ub9ac\ub4c0\uc11c, \uc561\uc158\uc744 \uac04\ub2e8\ud558\uac8c \uc815\uc758\ud560 \uc218 \uc788\ub294
createSlice<\/code>\ub97c \uc81c\uacf5<\/li>\n- \ube44\ub3d9\uae30 \ub85c\uc9c1\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud55c
createAsyncThunk<\/code>\ub97c \uc81c\uacf5<\/li>\n- \uc2a4\ud504\ub808\ub4dc \uc5f0\uc0b0\uc790\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \uc5c5\ub370\uc774\ud2b8 \ud560 \ud544\uc694 \uc5c6\uc774 \uc804\uccb4 \uc0c1\ud0dc\ub97c \uc27d\uac8c \uad00\ub9ac \ud560 \uc218 \uc788\ub294
configureStore<\/code>\ub97c \uc81c\uacf5<\/li>\n<\/ul>\n4. Redux Toolkit \uc124\uc815\ud558\uae30<\/h2>\n
Redux Toolkit\uc744 \uc0ac\uc6a9\ud558\uc5ec React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0 Redux\ub97c \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uc544\ub798 \ub2e8\uacc4\uc5d0 \ub530\ub77c \uc9c4\ud589\ud569\ub2c8\ub2e4:<\/p>\n
4.1 \uc758\uc874\uc131 \uc124\uce58<\/h3>\n
\uc6b0\uc120, Redux Toolkit\uacfc React-Redux\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4:<\/p>\n
npm install @reduxjs\/toolkit react-redux<\/code><\/pre>\n4.2 Slice \uc0dd\uc131\ud558\uae30<\/h3>\n
\ub2e4\uc74c\uc73c\ub85c, createSlice<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec slice\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4. \uc544\ub798 \uc608\uc2dc\ub294 ‘user’ slice\ub97c \uc0dd\uc131\ud558\ub294 \ubc29\ubc95\uc785\ub2c8\ub2e4:<\/p>\nimport { createSlice } from '@reduxjs\/toolkit';\n\nconst userSlice = createSlice({\n name: 'user',\n initialState: { name: '', age: 0 },\n reducers: {\n updateUser: (state, action) => {\n state.name = action.payload.name;\n state.age = action.payload.age;\n },\n },\n});\n\nexport const { updateUser } = userSlice.actions;\nexport default userSlice.reducer;<\/code><\/pre>\n4.3 Store \uc124\uc815\ud558\uae30<\/h3>\n
Slice\ub97c \uc0dd\uc131\ud55c \ud6c4, \uc774\ub97c \ud3ec\ud568\ud558\ub294 store\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n
import { configureStore } from '@reduxjs\/toolkit';\nimport userReducer from '.\/userSlice';\n\nconst store = configureStore({\n reducer: {\n user: userReducer,\n },\n});\n\nexport default store;<\/code><\/pre>\n5. React \ucef4\ud3ec\ub10c\ud2b8\uc640 Redux \uc5f0\uacb0\ud558\uae30<\/h2>\n
Redux store\ub97c React \ucef4\ud3ec\ub10c\ud2b8\uc640 \uc5f0\uacb0\ud558\uae30 \uc704\ud574 Provider<\/code>\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \ub2e4\uc74c \uc608\uc81c\ub294 Redux \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790 \uc815\ubcf4\ub97c \ud45c\uc2dc\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc90d\ub2c8\ub2e4:<\/p>\nimport React from 'react';\nimport { Provider, useSelector, useDispatch } from 'react-redux';\nimport store, { updateUser } from '.\/store';\n\nconst UserComponent = () => {\n const user = useSelector((state) => state.user);\n const dispatch = useDispatch();\n\n const handleChangeUser = () => {\n dispatch(updateUser({ name: 'Jane', age: 25 }));\n };\n\n return (\n \n
User Info:<\/h1>\n
Name: {user.name}<\/p>\n
Age: {user.age}<\/p>\n