6.5.2 reselect 패키지 사용하기

package.json

@@ -12,6 +12,7 @@
     "react-redux": "^7.2.5",
     "react-scripts": "4.0.3",
     "redux": "^4.1.1",
+    "reselect": "^4.0.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/common/store.js

@@ -1,5 +1,5 @@
 import { combineReducers, createStore } from "redux"
-import friendReducer from "../friend/state"
+import friendReducer from "../friend/state/state"
 import { timelineReducer } from "../timeline/state"
 
 const reducer = combineReducers({

src/friend/container/FriendMain.js

@@ -4,26 +4,21 @@ import { getNextFriend } from "../../common/mockData";
 import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "../common";
 import FriendList from "../component/friendList";
 import NumberSelect from "../component/NumberSelect";
-import { addFriend, setAgeLimit, setShowLimit } from "../state";
+import { getAgeLimit, getFriendsWithAgeLimit, getFriendsWithAgeShowLimit, getShowLimit } from "../state/selector";
+import { addFriend, setAgeLimit, setShowLimit } from "../state/state";
 
 export default function FriendMain() {
     const [
         ageLimit,
         showLimit,
         friendsWithAgeLimit,
         friendsWithAgeShowLimit
-    ] = useSelector(state => {
-        const {friends, ageLimit, showLimit} = state.friend
-        const friendsWithAgeLimit = friends.filter(
-            friend => friend.age <= ageLimit
-        )
-        return [
-            ageLimit,
-            showLimit,
-            friendsWithAgeLimit,
-            friendsWithAgeLimit.slice(0, showLimit)
-        ]
-    }, shallowEqual)
+    ] = useSelector(state => [
+        getAgeLimit(state),
+        getShowLimit(state),
+        getFriendsWithAgeLimit(state),
+        getFriendsWithAgeShowLimit(state)
+    ], shallowEqual)
     const dispatch = useDispatch()
 
     function onAdd() {

src/friend/state/selector.js

@@ -0,0 +1,15 @@
+import { createSelector } from "reselect"
+
+export const getFriends = state => state.friend.friends
+export const getAgeLimit = state => state.friend.ageLimit
+export const getShowLimit = state => state.friend.showLimit
+
+export const getFriendsWithAgeLimit = createSelector(
+    [getFriends, getAgeLimit],
+    (friends, ageLimit) => friends.filter(friend => friend.age <= ageLimit)
+)
+
+export const getFriendsWithAgeShowLimit = createSelector(
+    [getFriendsWithAgeLimit, getShowLimit],
+    (friendsWithAgeLimit, showLimit) => friendsWithAgeLimit.slice(0, showLimit)
+)

src/friend/state.js → src/friend/state/state.js

@@ -1,7 +1,7 @@
-import createItemsLogic from "../common/createItemsLogic"
-import createReducer from "../common/createReducer"
-import mergeReducers from "../common/mergeReducers"
-import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "./common"
+import createItemsLogic from "../../common/createItemsLogic"
+import createReducer from "../../common/createReducer"
+import mergeReducers from "../../common/mergeReducers"
+import { MAX_AGE_LIMIT, MAX_SHOW_LIMIT } from "../common"
 
 const {add, remove, edit, reducer: friendsReducer} = createItemsLogic('friends')