โœ๏ธ TIL

์œ ๋ฐ๋ฏธ ์ทจ์—…๋ถ€ํŠธ์บ ํ”„ - ํ”„๋ก ํŠธ์—”๋“œ&๋ฐฑ์—”๋“œ : 36์ผ์ฐจ TIL

Yuuuki 2024. 2. 6. 09:28

 

immer

๋ฐฐ์—ด์ด๋‚˜, ๊ฐ์ฒด๊ฐ™์€ ๋ถˆ๋ณ€์„ฑ ํƒ€์ž…์„ ๊ฐ€์ง„ state๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๊ธฐ์œ„ํ•ด์„ , ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž (...)๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ–ˆ๋‹ค.

ํ•˜์ง€๋งŒ depth๊ฐ€ ํฐ ๊ฐ์ฒด๋ฅผ ๊นŠ์€ ๋ณต์‚ฌ๋ฅผ ํ•˜๊ธฐ์—” ์Šคํ”„๋ ˆ๋“œ ์—ฐ์‚ฐ์ž๋กœ ๊ฐœ๋ฐœ์ž ์ž…์žฅ์—์„  ๊ต‰์žฅํžˆ ํž˜๋“ ์ผ์ด๋‹ค.

 

โœจimmer๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, draft๋ฅผ ์ฃผ๋Š”๋ฐ ๊นŠ์€ ๋ณต์‚ฌ๊ฐ€  ๋œ ๊ฐ์ฒด์ด๋‹ค!

 

[๊ธฐ์กด์˜ ๋ฐฉ์‹]

else if (action.type === ADD_FRIEND) {
    const newFriend = action.payload;
    const newState = { ...state, friends: [...state.friends, newFriend] };
    return newState;

 

[immer]

const newState = produce(
      (state,
      (draft) => {
        const newFriend = action.payload;
        draft.friends.push(newFriend);
      })
    );

๊นŠ์€ ๋ณต์‚ฌ๊ฐ€ ๋œ draft์— ์ƒˆ๋กœ์šด ๊ฐ’์„ push๋งŒ ํ•ด์ฃผ๋ฉด๋œ๋‹ค!

 

โœ“ produce ํ•จ์ˆ˜:  ์ƒˆ๋กœ์šด ์ƒํƒœ๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ฒซ ๋ฒˆ์งธ๋Š” ํ˜„์žฌ ์ƒํƒœ์ด๊ณ , ๋‘ ๋ฒˆ์งธ๋Š” ์—…๋ฐ์ดํŠธ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š” ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

 

 

 

createReducer

createReducer๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด, ์ž๋™์œผ๋กœ immer์„ ์‚ฌ์šฉํ•ด mutateํ•˜๊ฒŒ ๋ฐฐ์—ด,๊ฐ์ฒด state๋ฅผ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.

state.todos[3].completed = true

์ƒˆ๋กœ์šด state๋ฅผ ๋ฆฌํ„ดํ•  ์ˆ˜ ์žˆ๊ณ , mutateํ•˜๋‹ค!

switch ์•ˆ์“ฐ๊ฒŒํ•ด์คŒ! 

 

์ƒˆ๋กœ์šด state๊ฐ€ ์•„๋‹ˆ๋ฉด ์•„๋ฌด๊ฒƒ๋„ ๋ฆฌํ„ดํ•˜์ง€ ์•Š๋Š”๋‹ค?

push๋Š” ๋ฆฌํ„ดํ•˜์ง€ ์•Ÿ๋Š”๋‹ค? mutateํ•˜๊ฒŒ ํ•ด์ค€๋‹ค?

filter๋Š” ์ƒˆ๋กœ์šด array๋ฅผ ๋ฆฌํ„ดํ•œ๋‹ค. mutate๊ฐ€ ์•„๋‹ˆ๋ผ

 

createSlice

reducer์˜ ํ•จ์ˆ˜ ๊ฐ์ฒด, ์Šฌ๋ผ์ด์Šค ์ด๋ฆ„ store, initalstate , action.type, action creator ๋“ฑ

๊ธฐ์กด์— ๋‹ค ์ž‘์„ฑํ•ด์•ผํ–ˆ์ง€๋งŒ, Slice๋กœ ๊ฐ„๋žตํ•˜๊ฒŒ ์“ธ ์ˆ˜ ์žˆ๋‹ค.

โœ“ ๊ฐ„๋‹จํ•œ ๋ฆฌ๋“€์„œ ๋ฐ ์•ก์…˜ ์ƒ์„ฑ์ž๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ํ—ฌํผ ํ•จ์ˆ˜

 

import { createSlice } from '@reduxjs/toolkit';

const friendsSlice = createSlice({
  name: 'friends',
  initialState: { friends: [] },
  reducers: {
  	//actions๋“ค
    addFriend: (state, action) => {
      const newFriend = action.payload;
      state.friends.push(newFriend);
    },
  },
});

//actionCreatorํ•จ์ˆ˜ export
export const { addFriend } = friendsSlice.actions;
export default friendsSlice.reducer;

 

โ—๏ธ immer๋ฅผ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ๋ถˆ๋ณ€์„ฑ์„ ์œ ์ง€ํ•ฉ๋‹ˆ๋‹ค.

 

//store.js

import { configureStore } from '@reduxjs/toolkit';
import friendsReducer from './friendsSlice';

const store = configureStore({
  reducer: {
    friends: friendsReducer,
  },
});

// ์‚ฌ์šฉ ์˜ˆ์‹œ
store.dispatch(addFriend({ name: 'John' }));

 

์ด ๋ฆฌ๋“€์„œ ์Šฌ๋ผ์ด์Šค๋ฅผ Redux ์Šคํ† ์–ด์— ๋“ฑ๋กํ•˜๋ฉด, immer๊ฐ€ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉ๋˜์–ด ์ƒํƒœ์˜ ๋ณ€๊ฒฝ์„ ์•ˆ์ „ํ•˜๊ฒŒ ์ฒ˜๋ฆฌํ•œ๋‹ค.

 

createAction

action creator ํ•จ์ˆ˜ ์ƒ์„ฑ

 

 

API

  • configureStore(): createStore๋‹จ์ˆœํ™”๋œ ๊ตฌ์„ฑ ์˜ต์…˜๊ณผ ์ ์ ˆํ•œ ๊ธฐ๋ณธ๊ฐ’์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๋ž˜ํ•‘๋ฉ๋‹ˆ๋‹ค. ์ž๋™์œผ๋กœ ์Šฌ๋ผ์ด์Šค ๋ฆฌ๋“€์„œ๋ฅผ ๊ฒฐํ•ฉํ•˜๊ณ , ์ œ๊ณตํ•˜๋Š” Redux ๋ฏธ๋“ค์›จ์–ด๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ , redux-thunk๊ธฐ๋ณธ์ ์œผ๋กœ ํฌํ•จํ•˜๋ฉฐ, Redux DevTools Extension์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • createReducer(): ์Šค์œ„์น˜ ๋ฌธ์„ ์ž‘์„ฑํ•˜๋Š” ๋Œ€์‹  Case Reducer ํ•จ์ˆ˜์— ์ž‘์—… ์œ ํ˜•์˜ ์กฐํšŒ ํ…Œ์ด๋ธ”์„ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ์ž๋™์œผ๋กœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ immer๋ฅผ ์‚ฌ์šฉ ํ•˜์—ฌ state.todos[3].completed = true.
  • createAction(): ์ฃผ์–ด์ง„ ์•ก์…˜ ์œ ํ˜• ๋ฌธ์ž์—ด์— ๋Œ€ํ•œ ์•ก์…˜ ์ƒ์„ฑ๊ธฐ ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • createSlice(): ๋ฆฌ๋“€์„œ ํ•จ์ˆ˜์˜ ๊ฐ์ฒด, ์Šฌ๋ผ์ด์Šค ์ด๋ฆ„, ์ดˆ๊ธฐ ์ƒํƒœ ๊ฐ’์„ ๋ฐ›์•„๋“ค์ด๊ณ  ํ•ด๋‹น ์•ก์…˜ ์ƒ์„ฑ์ž์™€ ์•ก์…˜ ์œ ํ˜•์„ ์‚ฌ์šฉํ•˜์—ฌ ์Šฌ๋ผ์ด์Šค ๋ฆฌ๋“€์„œ๋ฅผ ์ž๋™์œผ๋กœ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • combineSlices(): ์—ฌ๋Ÿฌ ์Šฌ๋ผ์ด์Šค๋ฅผ ๋‹จ์ผ ๋ฆฌ๋“€์„œ๋กœ ๊ฒฐํ•ฉํ•˜๊ณ  ์ดˆ๊ธฐํ™” ํ›„ ์Šฌ๋ผ์ด์Šค์˜ "์ง€์—ฐ ๋กœ๋”ฉ"์„ ํ—ˆ์šฉํ•ฉ๋‹ˆ๋‹ค.
  • createAsyncThunkpending/fulfilled/rejected: ์ž‘์—… ์œ ํ˜• ๋ฌธ์ž์—ด๊ณผ ์•ฝ์†์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋ฐ›์•„๋“ค์ด๊ณ  ํ•ด๋‹น ์•ฝ์†์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์—… ์œ ํ˜•์„ ์ „๋‹ฌํ•˜๋Š” ์ฝํฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • createEntityAdapter: ์ €์žฅ์†Œ์—์„œ ์ •๊ทœํ™”๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•ด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ๋ฆฌ๋“€์„œ ๋ฐ ์„ ํƒ๊ธฐ ์„ธํŠธ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.
  • ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฝ๋„๋ก ๋‹ค์‹œ ๋‚ด๋ณด๋‚ธ Reselect ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์˜ ์œ ํ‹ธ๋ฆฌํ‹ฐ createSelector์ž…๋‹ˆ๋‹ค .